jquery - 有没有更好的方法从表行中获取值？

Question

说我有这个

<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();

从现在开始，我实际上是在寻找第三个单元，而不是第二个单元。

那么有没有更好的方法呢？

谢谢

Answer 1

给td感兴趣的类名，以便您可以使用类名选择器选择它们。

<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() 获取其内容。 html() 也会返回您可能不感兴趣的任何包含的 HTML。

您是否也考虑过使用 <input type="radio">强制进行单一选择？如果你给它们都一样name ，那么它们属于同一个单选组。