2

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

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

但是，如果我尝试访问单元格 [0] [0]，它会返回未定义。我觉得我不完全理解 getElementsByTagName 正在做什么......这种方法有希望吗？有没有更高效的？

4

4 回答 4

1

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

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

无需构建自己的阵列。

所以不要使用.getElementsByTagName()，它返回一个一维数组。（嗯，实际上是一个 NodeList，但是只要你记得它是live的，你就可以像使用数组一样使用它。）

如果您确实想遍历所有单元格以将它们与其他值进行比较，请按照以下方式从左到右，从上到下使用.rowsand .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
   }
}
于 2011-11-10T07:16:02.563 回答
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();
    });
});
于 2011-11-10T07:00:08.023 回答
0

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

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

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

于 2011-11-10T07:03:00.550 回答
0

使用它来获取表格单元格作为二维数组

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]
于 2011-11-10T07:08:44.710 回答