遍歷表格單元格

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結合在一起。 這使您無需編寫兩個循環。