如果我有一个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?


当前回答

这里有一个使用现代Javascript ES6+的解决方案

    const rows = document.querySelector("table")?.rows;
    if (!rows) {
      return;
    }
    Array.from(rows).forEach(row => {
      console.log(row);
      const cells = Array.from(row.cells);
      cells.forEach(cell => {
        console.log(cell);
      });
    });

Array.from()将HTMLCollection的行和/或单元格转换为一个常规的Javascript数组,你可以迭代通过。

表的文档。行使用率:https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows

行的文档。cell用法:https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement

其他回答

这里有一个使用现代Javascript ES6+的解决方案

    const rows = document.querySelector("table")?.rows;
    if (!rows) {
      return;
    }
    Array.from(rows).forEach(row => {
      console.log(row);
      const cells = Array.from(row.cells);
      cells.forEach(cell => {
        console.log(cell);
      });
    });

Array.from()将HTMLCollection的行和/或单元格转换为一个常规的Javascript数组,你可以迭代通过。

表的文档。行使用率:https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows

行的文档。cell用法:https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement

更好的解决方案:使用Javascript的原生array .from()并将HTMLCollection对象转换为数组,之后您可以使用标准的数组函数。

var t = document.getElementById('mytab1');
if(t) {
    Array.from(t.rows).forEach((tr, row_ind) => {
        Array.from(tr.cells).forEach((cell, col_ind) => {
            console.log('Value at row/col [' + row_ind + ',' + col_ind + '] = ' + cell.textContent);
        });
    });
}

你也可以引用tr.rowIndex和cell。而不是使用row_ind和col_ind。

我更喜欢这种方法,而不是前2个投票最多的答案,因为它不会让你的代码与全局变量I, j, row和col混淆,因此它提供了干净的,模块化的代码,不会有任何副作用(或提高lint /编译器警告)…没有其他库(例如jquery)。此外,它使您的代码可以访问元素和索引变量,而不仅仅是元素,如果您喜欢隐藏索引,您可以在回调参数列表中忽略它。

如果你需要在旧版本(es2015之前)的Javascript中运行,Array.from可以被填充。

如果你想遍历每一行(<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
}

我的解决方案,使用es6:

var table = document.getElementById('mytab1');

var data = [...table.rows].map(row => [...row.cells].map(td => td.innerText));

console.log(data)

引用: https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCollection

使用一个for循环:

var table = document.getElementById('tableID');  
var count = table.rows.length;  
for(var i=0; i<count; i++) {    
    console.log(table.rows[i]);    
}