Javascript 在表单元格上迭代

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

现在，我想得到所有的TDs，在所有的TRs下。我还希望能够在TDs上执行操作，具体取决于表中的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>

处理器速度
内存量
2
3
3.2
4

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

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

您必须覆盖所有

tr

元素（这是一个，从以下位置返回）：

for（var i=0，l=tableRows.length；i

在循环内部，您可以使用

getElementsByTagName

或使用属性再次获取一行的所有

td

s。然后，您可以决定也对它们进行迭代，或者显式地访问特定的单元格，例如

cells[1]

以访问该行中的第二个单元格（第二列）

如果单元格包含简单文本，或者没有任何事件处理程序绑定到其子体，则只需使用更改元素的文本内容即可

否则，您必须对单元格执行and操作（在任何情况下，这可能是最好的选择）

---

是各种信息的极好来源，包括DOM和JavaScript。

您必须覆盖所有

tr

元素（这是一个，从以下位置返回）：

for（var i=0，l=tableRows.length；i

在循环内部，您可以使用

getElementsByTagName

或使用属性再次获取一行的所有

td

s。然后，您可以决定也对它们进行迭代，或者显式地访问特定的单元格，例如

cells[1]

以访问该行中的第二个单元格（第二列）

如果单元格包含简单文本，或者没有任何事件处理程序绑定到其子体，则只需使用更改元素的文本内容即可

否则，您必须对单元格执行and操作（在任何情况下，这可能是最好的选择）

---

---

是各种信息的极好来源，包括DOM和JavaScript。

如果您想简化您的生活和逻辑，下面是一个示例：

我要做的是首先得到准确的表格，然后从那里获取所有td元素。它将按行的顺序自动遍历每一行，因为这是它们在标记中的顺序。您不需要首先选择

document.getElementsByTagName（'tr'）

。如果需要筛选，可以先查找树或选择更高级别的元素，例如

thead

在第二个示例中，我明确知道只有一个tbody，可以访问长度为1的区域，并通过链

.getElementsByTagName（'td'）

仅获取tbody中的

td

（您可以在

thead

或

tfoot

中有一个td）

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

---

最后一个示例结合了Rob W的建议（ex3）和ex2。这可以让你不用写两个循环。

如果你想简化你的生活和逻辑，这里有一个你想要的例子：

我要做的是首先得到准确的表格，然后从那里获取所有td元素。它将按行的顺序自动遍历每一行，因为这是它们在标记中的顺序。您不需要首先选择

document.getElementsByTagName（'tr'）

。如果需要筛选，可以先查找树或选择更高级别的元素，例如

thead

在第二个示例中，我明确知道只有一个tbody，可以访问长度为1的区域，并通过链

.getElementsByTagName（'td'）

仅获取tbody中的

td

（您可以在

thead

或

tfoot

中有一个td）

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

---

最后一个示例结合了Rob W的建议（ex3）和ex2。这允许您不必编写两个循环。

我将这样做：

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.)

    });
});

现场演示：

---

注意：您需要包括，因为一些旧浏览器（主要是IE8）没有实现新的ES5功能，如

forEach

，我会这样做：

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.)

    });
});

现场演示：

---

注意：您需要包括，因为一些较旧的浏览器（主要是IE8）没有实现新的ES5功能，例如

forEach

jQuery可以真正简化您的逻辑。你反对使用它吗？到目前为止你尝试了什么？你被困在哪里？不知道如何获取

td

s？如何迭代元素集合？如何向元素添加文本？我反对使用jQuery，除非它确实是必要的。我试图自学如何使用Javascript。我被困在如何选择TRs下的多个TDs中。目前所有的答案都很重。我建议使用

.rows

和

.cells

属性来访问单个单元格，例如：

表.rows[0].cells[0]

（返回第一行的第一个单元格，因为这些集合是零基的）。我很欣赏学习Javascript而不依赖jquery的愿望，但在某一点上，你是在割掉你的鼻子来激怒你的脸。如果您反对基于膨胀的jquery，那么有许多较小的库使得选择元素变得微不足道。jquery确实可以简化您的逻辑。你反对使用它吗？到目前为止你尝试了什么？你被困在哪里？唐

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.)

    });
});