使用/jQuery 更新表格单元格数据答案

【问题标题】：Update Table Cell Data w/jQuery使用/jQuery 更新表格单元格数据
【发布时间】：2013-01-25 23:40:29
【问题描述】：

这是我的表格格式。

<table id="table1">
 <tr id="row_1">
  <th>Some Heading</th>
  <td class="t1"></td>
  <td class="t2"></td>
  <td class="t3"></td>
  <td class="t4"></td>
 </tr>
 <tr id="row_2">
  <th>Some Heading</th>
  <td class="t1"></td>
  <td class="t2"></td>
  <td class="t3"></td>
  <td class="t4"></td>
 </tr>
 etc...
</table>

如何使用 jQuery 更新单独的表格单元格 (td) 的内容？更好的表达方式是如果我想更新#row_1 cell 1或#row_2 cel 4等的内容，我该怎么写？

我有另一个表，我可以毫无问题地更新数据，但它也简单得多。它每行只有一个表格单元格需要更新内容。我是用这个做的。

$('#val_' + i).html("stuff I put in it");

每个单元格都有一个唯一的 id - #val_ + 一些标识它的数字，这样我就可以轻松地循环遍历它，但是稍微复杂一点的表格给我带来了麻烦。

【问题讨论】：

$( '#row_1 .t1' ) 还是我错过了什么？

标签： javascript jquery html-table cell updates

【解决方案1】：

$('#table1').children('tr').each(function() {

    // where 'x' is the index of the <td> to target
    var $requiredCell = $(this).children('td').eq(x);

    doStuff( $requiredCell );

});

或者，如果您只是整体定位单个单元格

$('#row_1 td.t1');

或者

$('#row_1 td').first(); // If you can't use the classes...

或者

$('#row_1 td').eq(x); // for targeting a td at an arbitrary index 'x'

例如（来自您的问题）：

$('#row_1 td').eq(3); // target the fourth <td>. Note index is 0-based

【讨论】：

谢谢。 .eq(INDEX) 选项效果很好。这样我就可以摆脱 class=""。仍然试图弄清楚这个 jQuery 的东西。您给出的第一个选项是否会遍历整个表格？我在其他示例中看到 jQuery 对此有所帮助，而不是执行常规的旧循环。
@user1607759 是的，第一个选项使用内部each 方法循环遍历表中的行。取决于您正在做什么，尽管您实际上可以将方法链接起来，它们将应用于<tr> 或<td> 元素的整个集合。您需要更具体地说明您要完成的工作。

【解决方案2】：

要获得所有 tds，您可以使用类似的东西。

$("#row_1").find('td').each {function() {
  // do something
});

要获得特定的 td，您可以这样做：

$('#row_1 .t1').something();

【讨论】：