访问jQuery中的表单元格

Question

这是怎么回事：

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

但不是这个：

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

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

或者，是否有其他方法可以访问表中的各个单元格？非常感谢。

Answer 1

前者之所以有效，是因为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');

Answer 2

如果您希望在每行上循环

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