如何迭代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 = ""; 
    } 
}