遍历表格单元格

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>

我希望能够根据TR中的顺序分别选择每个TD，然后向其中添加文本。 TR的数量将可变，至少为20，甚至可能更多。 将有大约10-15 TD。

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

Answer 1

你必须遍历了所有tr元素（这是一个NodeList ^{[MDN] ，}从返回getElementsByTagName ^{[MDN] ）：}

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

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

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

否则，您必须创建一个新的文本节点 并将其附加到单元格（在任何情况下，这都是最佳选择）。

---

Mozilla开发人员网络是收集各种信息的重要来源，包括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/

注意：由于某些旧版浏览器（主要是IE8）未实现新的ES5功能（如forEach ），因此您需要包括ES5填充程序 。

Answer 3

如果您想简化生活和逻辑，这里是您想要的示例： http : //jsfiddle.net/Akkuma/2wJ8G/

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

在第二个示例中，我明确知道只有一个tbody可以访问长度为1的区域，并且链.getElementsByTagName('td')仅获取tbody中的那些td （您可以在其中包含一个td thead或tfoot ）

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

最后一个示例将Rob W的推荐（ex3）与ex2结合在一起。 这使您无需编写两个循环。