如何在javascript中迭代表行和单元格?

如果你想通过每一行( <tr> )了解/识别行( <TR & GT; )并遍历每个列( <td> (每行) <TR & GT; ,这就是我们要走的路。

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 & GT; ,忽略你在哪一行,那么这就是你要走的路。

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
}

您可以考虑使用jquery。使用jquery,它非常简单,可能看起来像这样:

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

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>

在每个传递过程中,循环R/C迭代器增加,集合中的新行/单元格被分配给行/单元格变量。当集合中没有更多的行/单元格时,会将false分配给行/单元格,并在循环停止(退出)时迭代。

ES6:

let table = document.querySelector("#mytab1");

for (let row of table.rows) 
{
    for(let cell of row.cells) 
    {
       let value = cell.innerText; // or cell.innerHtml (you can also set value to innerText/Html)
    }
}

工作 example here .

这个解决方案对我很有效

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 = "";
     }
}

你可以使用 .querySelectorAll() 选择全部 td 元素,然后循环这些元素 .forEach() . 它们的值可以用 .innerHTML :

const cells = document.querySelectorAll('td');
cells.forEach(function(cell) {
  console.log(cell.innerHTML);
})

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

如果只想从特定行中选择列,可以使用伪类 :nth-child() 选择特定的 tr ,可与 child combinator ( > ) (如果您在一张表中有一张表,这可能很有用):

const cells = document.querySelectorAll('tr:nth-child(2) > td');
cells.forEach(function(cell) {
  console.log(cell.innerHTML);
})

<table name=“mytab”id=“mytab1”>
T>
<td>第1列值1</td>
<td>第2列值2</td>
& LT/TR & GT;
T>
<td>第1列值3</td>
<td>第2列值4</td>
& LT/TR & GT;
&表;