在 jQuery 中访问表格单元格答案

【问题标题】：Accessing table cells in jQuery在 jQuery 中访问表格单元格
【发布时间】：2020-05-07 17:28:04
【问题描述】：

这是怎么回事：

    alert(document.getElementById("tableId").rows[7].cells[7].innerHTML);

但不是这个：

    alert($("#tableId").rows[7].cells[7].innerHTML);

对于上下文，我曾使用 .append 将单元格添加到表格中，并且我希望将来能够进一步操作每个单元格（例如使用 .data，这就是我想使用 jQuery 的原因。

或者，还有其他方法可以访问表格中的各个单元格吗？谢谢。

【问题讨论】：

标签： javascript jquery html-table

【解决方案1】：

前者有效，因为getElementById() 返回一个具有rows 属性的HTMLTableElement 对象。后者使用了一个没有 rows 属性的 jQuery 对象，所以你会得到一个错误。

您可以通过以下两种方式之一从 jQuery 对象中检索底层元素来解决此问题：

console.log($("#tableId")[0].rows[7].cells[7].innerHTML); // access by index
console.log($("#tableId").get(0).rows[7].cells[7].innerHTML); // get(0)

您也可以使用 jQuery 选择器直接选择您想要的单元格：

let html = $('#tableId tr:eq(7) td:eq(7)').html();

对于上下文，我使用 .append 将单元格添加到表格中，并且我希望将来能够进一步操作每个单元格

如果是这种情况，您可以保存对您添加的内容的引用，以便您可以再次使用它，而无需执行 DOM 访问操作。在伪代码中它看起来像这样：

let $content = $('<tr><td>Foo</td></tr').appendTo('#tableId');

// in some other function later in the page execution...
$content.find('td').text('bar').data('lorem', 'ipsum');

【讨论】：

您能解释一下为什么要在 $("#tableId") 后面加上 [0] 吗？它究竟在访问什么？
它正在访问 jQuery 对象并检索创建它的原始 Element 对象。 Here's a better explanation

【解决方案2】：

如果你想遍历每一行

$('#tableId tr').each(function() {
  if (!this.rowIndex) return; // to skip first row if you have heading
    console.log(this.cells[0].innerHTML);
});

【讨论】：