Javascript 在jQuery中访问表单元格

这是怎么回事：

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

但不是这个：

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

对于上下文，我使用了.append将外接程序单元格添加到表中，我希望将来能够进一步操作每个单元格，例如使用.data，这就是我希望使用jQuery的原因

或者，是否有其他方法访问表中的单个单元格？谢谢。

前者有效，因为getElementById返回具有rows属性的HTMLTableElement对象。后者使用的jQuery对象没有rows属性，因此会出现错误

您可以通过以下两种方式之一从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');

前者工作是因为getElementById返回一个具有rows属性的HTMLTableElement对象。后者使用的jQuery对象没有rows属性，因此会出现错误

您可以通过以下两种方式之一从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 tr').each(function() {
  if (!this.rowIndex) return; // to skip first row if you have heading
    console.log(this.cells[0].innerHTML);
});

---

如果您希望在每一行上循环

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

---

您能解释一下为什么在$tableId后面加[0]吗？它究竟在访问什么？它访问jQuery对象并检索从中创建它的原始元素对象。您能解释一下为什么在$tableId后面加[0]吗？它究竟在访问什么？它访问jQuery对象并检索从中创建它的原始元素对象。