2D массив с getElementsByTagName?

Question

Я пытаюсь получить доступ к ячейкам таблицы в javascript, используя метод getElementsByTagName, как показано ниже.В конечном итоге я хочу сравнить каждую ячейку в массиве с другим значением и иметь возможность изменить цвет фона этой ячейки в соответствии со сравнением.

var cells = document.getElementById("myTable").getElementsByTagName("tr");
for (i = 0; i < cells.length; i++)
{
   cells[i] = cells[i].getElementsByTagName("td");
}

Однако, если я попытаюсь получить доступ к ячейкам [0][0], возвращает неопределенное.Я чувствую, что не до конца понимаю, что делает getElementsByTagName ... есть ли надежда на этот метод?Есть ли более эффективный?

Answer 1

Вы можете получить доступ к любой ячейке напрямую, используя свойство .rows элемента таблицы и свойство .cells элемента tr:

var myCell = myTable.rows[y].cells[x];

Нет необходимости создавать собственный массив.

Так что не используйте .getElementsByTagName(), который возвращает одномерный массив.(Ну, на самом деле это NodeList, но вы можете использовать его как массив, если вы помните, что он live .)

Если вы действительно хотите просмотреть все ячейки, чтобы сравнить ихк какому-то другому значению вот как, слева направо, сверху вниз, используя .rows и .cells:

var rows = document.getElementById("myTable").rows;
for (var y=0; y < rows.length; y++) {
   for (var x=0; x < rows[y].length; x++) {
      var cellAtXY = rows[y].cells[x];
      cellAtXY.someProperty = something; // your code here
   }
}

Answer 2

использовать jquery будет просто:

var contentArray = new Array();



$('tr').each(function(indexParent) {
  contentArray['row'+indexParent] = new Array();
    $(this).children().each(function(indexChild) {
      contentArray['row'+indexParent]['col'+indexChild] = $(this).html();
    });
});

Answer 3

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

var tableRows = (document.getElementById("myTable")).getElementsByTagName("tr");

var cells = [];
for(var i = 0; i < tableRows.length; i++) {
    cells.push(tableRows[i].getElementsByTagName("td"));
}

И теперь вы можете получить любую ячейку на вашем столе, используя

cells[0][0]

Answer 4

Вам нужно сделать что-то подобное для каждой строки.

var row = table.getElementsByTagName('tr')[rowIndex];
var cells = row.getElementsByTagName('td');

, а затем построить свой массив из содержимого этих переменных.