Question

所以我有这个代码（来自这个网站的亲切帮助！）

window.onload = function inventorytable() {
var tableRows = document.getElementById

("inventorytable").getElementsByTagName("tbody")[0].getElementsByTagName("tr");

现在，从这里开始，我想在所有TR下获得所有TD。我还希望能够在TD上执行操作，具体取决于它们在表中的哪个TD（即哪一列）。

例如，如果我有

<tr>
<th>Processor Speed</th>
<th>Amount of RAM</th>
<tr>
<td>2.0</td>
<td>3.0</td>
</tr>
<tr>
<td>3.2</td>
<td>4.0</td>
</tr>

我希望能够分别选择每个TD，具体取决于TR中的顺序，然后添加文本。将有可变数量的TR，至少20，甚至更多。将会有大约10-15个TD。

添加的文字类似于“Ghz”或“GB”

Answer 1

您必须iterate覆盖所有tr元素（NodeList ^[MDN]，从getElementsByTagName ^[MDN]返回）：

for(var i = 0, l = tableRows.length; i < l; i++) {
    var row = tableRows[i];
    //...
}

在循环内部，您可以使用td或使用.cells ^[MDN]属性再次获取一行的所有getElementsByTagName。然后，您可以决定迭代它们或显式访问特定单元格，例如cells[1]以访问该行中的第二个单元格（第二列）。

如果单元格包含简单文本，或者您没有绑定到其后代的任何事件处理程序，则只需使用innerHTML ^[MDN]更改元素的文本内容。

否则你必须create a new text node和append it到单元格（在任何情况下，这可能是最好的选择）。

Mozilla Developer Network是各种信息的重要来源，包括DOM和JavaScript。

Answer 2

我就是这样做的：

var table = document.getElementById( 'inventorytable' );

[].forEach.call( table.rows, function ( row, i ) {
    [].forEach.call( row.cells, function ( cell, j ) {

        // this function runs for every cell in the table
        cell // references the current cell
        row // references the current row (the row the cell is in)
        i // the row index (0 = first row, 1 = second row, etc.)
        j // the cell index (0 = first cell in row, 1 = second cell in row, etc.)

    });
});

现场演示： http://jsfiddle.net/6tXUm/

注意：您需要包含ES5 shim，因为某些较旧的浏览器（主要是IE8）未实现forEach等新的ES5功能。

Answer 3

如果你想简化你的生活和逻辑，这里就是你想要的一个例子：http://jsfiddle.net/Akkuma/2wJ8G/

我正在做的是先获取确切的表格并从那里抓取所有td元素。它将按行的顺序自动运行每个，因为这是它们在标记中的顺序。您无需先选择document.getElementsByTagName('tr')。如果您需要过滤，您可以先查找树或选择更高级别的元素，例如thead。

在第二个例子中，我明确知道只有一个tbody，可以访问长度为1的区域，链.getElementsByTagName('td')只能获取tbody中的那些td（你可以在thead或tfoot）

中添加td

第三个例子使用了@Rob W建议使用table dom遍历。至少在我的例子中使用它只会使代码复杂化。

最后一个例子结合了Rob W的推荐（ex3）和ex2。这允许您跳过必须编写两个循环。

迭代表格单元格

3 个答案: