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

从现在开始，我实际上已经是第3个细胞而不是第2个细胞了。

那么有更好的方法吗？

由于

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，那么他们属于同一个选择组。

Answer 2

我喜欢@BalusC的答案并建议你使用它，但如果由于某种原因你不能这样做，为什么不使用全局常量呢？

var PRICE_ROW = 1;
var AMOUNT_ROW = 2;

$(cells[PRICE_ROW]).html();

另一种替代方法可能包括在使用前将行转换为名称为键的JavaScript对象。

Answer 3

我几天前经历了同样的事情，我有一个充满复选框的表格，我需要从客户端评估中提取单元格值。这就是我想出来的。

// Find all the checked checkboxes in a table
var CheckedCheckBoxes = $('#tbl').find("input[type='checkbox']:checked");

// Loop over all the checked checkboxes, and pull in the value from the 'td' item I select
CheckedCheckBoxes.each(function() {
    var cellValue = $(this).parent().parent().find('td:eq(2)').text();
}

我很确定你需要parent（）。parent（），因为复选框位于tr中的td中，你需要到tr来搜索你想要的td（单元格）

Answer 4

回应你对BalusC答案的评论......

如果您使用所需的额外信息隐藏单元格，则使用上述脚本检索它。我认为使用自定义data-属性（ref）将所需数据添加到输入本身会更有效。例如：

<table border="1" id="tbl">
 <tr>
  <td><input type="checkbox" name="vehicle" value="Bike" data-extra="some extra data stored here instead of in a hidden table cell" data-price="250" /></td>
  <td> I am new </td>
  <td>row 1, cell 1 (this cell is hidden)</td>
  <td>row 1, cell 2 (this cell is hidden)</td>
 </tr>
 <tr>
  <td><input type="checkbox" name="vehicle" value="Bike" data-extra="some extra data" data-price="300"/></td>
  <td> I am new </td>
  <td>row 2, cell 1 (this cell is hidden)</td>
  <td>row 2, cell 2 (this cell is hidden)</td>
 </tr>
</table>

然后你可以使用这个脚本（因为你说一次只检查一个复选框）：

var cell = $('#tbl :checked').attr('data-extra');

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

4 个答案: