说我有这个
<table border="1" id="tbl">
<tr>
<td><input type="checkBox" name="vehicle" value="Bike" /></td>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td><input type="checkBox" name="vehicle" value="Bike" /></td>
<td>row 2,cell 1</td>
<td>row 2,cell 2</td>
</tr>
</table>
现在,我要获取选中的行,然后获取该选中行的单元格值.所以我会这样做
var cells = $('#tbl :checked').parents('tr').children('td');
因此,假设只能选中一个复选框(因此,没有jQuery foreach循环).
所以现在说我想获得第二个表格单元格的值
var secondCell = $(cells[1]).html();
尽管这样做会使代码变得如此脆弱.例如,如果我在复选框之后放置另一个表格单元格该怎么办?
<table border="1" id="tbl">
<tr>
<td><input type="checkBox" name="vehicle" value="Bike" /></td>
<td> I am new </td>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td><input type="checkBox" name="vehicle" value="Bike" /></td>
<td> I am new </td>
<td>row 2,cell 1</td>
<td>row 2,cell 2</td>
</tr>
</table>
所以现在我必须检查我的代码并更改它
var secondCell = $(cells[1]).html();
对此
var thirdCell = $(cells[2]).html();
从现在起,我实际上位于第三个单元之后,不再位于第二个单元之后.
那有更好的方法吗?
谢谢
最佳答案
给感兴趣的tds指定一个类名,以便您可以使用类名选择器选择它们.
<tr>
<td><input type="checkBox" name="vehicle" value="Bike" /></td>
<td> I am new </td>
<td class="cell1">row 1,cell 1</td>
<td class="cell2">row 1,cell 2</td>
</tr>
与
var row = $('#tbl :checked').parents('tr');
var cell1 = $('.cell1',row);
var cell2 = $('.cell2',row);
您可能还希望使用text()
来获取其内容. @L_502_1@也会返回任何您可能不感兴趣的包含HTML的内容.
您是否也考虑过使用< input type =“ radio”>强迫一个选择?如果您给他们所有相同的名称,则它们属于相同的单个选择组.