Доступ к ячейкам таблицы в jQuery

Question

Почему это работает:

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

Но не это:

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

Для контекста я использовал .append для добавления ячеек в таблицу, и я хочу иметь возможность манипулировать каждой ячейкой в ​​будущем (например, используя .data, поэтому я хочу использовать jQuery.

В качестве альтернативы, есть ли другие способы доступа к отдельным ячейкам в таблице? ты.

Answer 1

Если вы ищете l oop по каждой строке

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

Answer 2

Первый работает, потому что getElementById() возвращает объект HTMLTableElement, который имеет свойство rows. Последний использует объект 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');