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

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 S的权益类名，这样就可以使用类名选择器中选择它们。

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

我敢肯定你需要家长（）。父（），因为该复选框处于TD是在TR，你需要去的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');