如何迭代JavaScript中的表格行和單元格？

Question

如果我有一個HTML表...說

<div id="myTabDiv"> 
<table name="mytab" id="mytab1"> 
    <tr> 
    <td>col1 Val1</td> 
    <td>col2 Val2</td> 
    </tr> 
    <tr> 
    <td>col1 Val3</td> 
    <td>col2 Val4</td> 
    </tr> 
</table> 
</div> 

我怎麼會通過所有表中的行進行迭代，並從各行中的每個單元格中檢索值（假設行，每行我檢查的時間可以改變的數量）在JavaScript中？

Answer 1

如果你想通過每一行（<tr>），明知/識別行（<tr>），並通過各行（<tr>）中的每一列（<td>）迭代，那麼這是要走的路。

var table = document.getElementById("mytab1"); 
for (var i = 0, row; row = table.rows[i]; i++) { 
    //iterate through rows 
    //rows would be accessed using the "row" variable assigned in the for loop 
    for (var j = 0, col; col = row.cells[j]; j++) { 
    //iterate through columns 
    //columns would be accessed using the "col" variable assigned in the for loop 
    } 
} 

如果你只是想通過細胞（<td>），忽略你在哪一行，那麼這是要走的路。

var table = document.getElementById("mytab1"); 
for (var i = 0, cell; cell = table.cells[i]; i++) { 
    //iterate through cells 
    //cells would be accessed using the "cell" variable assigned in the for loop 
} 

Answer 2

你可以考慮使用jQuery。與jQuery這是超級簡單，可能是這樣的：

$('#mytab1 tr').each(function(){ 
    $(this).find('td').each(function(){ 
     //do your stuff, you can use $(this) to get current cell 
    }) 
}) 

Answer 3

var table=document.getElementById("mytab1"); 
 
var r=0; 
 
while(row=table.rows[r++]) 
 
{ 
 
    var c=0; 
 
    while(cell=row.cells[c++]) 
 
    { 
 
    cell.innerHTML='[Row='+r+',Col='+c+']'; // do sth with cell 
 
    } 
 
}

<table id="mytab1"> 
 
    <tr> 
 
    <td>A1</td><td>A2</td><td>A3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>B1</td><td>B2</td><td>B3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>C1</td><td>C2</td><td>C3</td> 
 
    </tr> 
 
</table>

在每次經過while循環R/C迭代增加和收集新的行/單元被分配到排/單元格變量。當集合中沒有更多行/單元格時，將false分配給行/單元格，並在while循環停止（退出）時進行迭代。

Answer 4

該解決方案完全爲我工作

var table = document.getElementById("myTable").rows; 
var y; 
for(i = 0; i < # of rows; i++) 
{ for(j = 0; j < # of columns; j++) 
    { 
     y = table[i].cells; 
     //do something with cells in a row 
     y[j].innerHTML = ""; 
    } 
}