Question

我正在尝试使用getElementsByTagName方法在javascript中访问表格单元格，如下所示。最后，我想将数组中的每个单元格与另一个值进行比较，并能够根据比较更改该单元格的背景颜色。

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

但是，如果我尝试访问单元格[0] [0]，则返回undefined。我觉得我不完全理解getElementsByTagName正在做...这个方法有什么希望吗？有效率吗？

Answer 1

使用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 2

您可以使用表格元素的.rows属性和tr元素的.cells属性直接访问任何单元格：

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 3

你需要为每一行做这样的事情。

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

然后根据这些变量的内容构建数组。

Answer 4

使用此选项将表格单元格设为2D数组

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]

带有getElementsByTagName的2D数组？

4 个答案: