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


当前回答

es6:

const table = document.getElementById('some-table');
const cells = table.getElementsByTagName('td');

for (let cell of cells) {
   // do something with cell here
}

早期版本:

var table = document.getElementById('some-table');
var cells = table.getElementsByTagName('td');
for ( var i in cells ) {
   // do something with cells[i]
}

来源:https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

其他回答

var表= . getelementbyid(“mytab1”); var r = 0;//开始计算表中的行数 而(行= table.rows (r + +)) { var c = 0;//开始计数行中的列 而(细胞= row.cells (c++)) { cell.innerHTML = ' [R ' + R + ' C ' + C + '] ';//用cell做某事 } } <表id = " mytab1 " > < tr > A1 < td > < / 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 > 表> < /

每次遍历while循环时,r/c迭代器都会增加,集合中的新行/单元格对象会被赋值给行/单元格变量。当集合中没有更多的行/单元格时,将false赋给行/单元格变量,并通过while循环停止(退出)进行迭代。

Try

for (let row of mytab1.rows) 
{
    for(let cell of row.cells) 
    {
       let val = cell.innerText; // your code below
    }
}

for (let row of mytab1.rows) { for(let cell of row.cells) { console.log(cell.innerText) } } <div id=“myTabDiv”> <表名=“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>

(《让我排》[let[我]排][.. mytab1]。 { 用于(let [j,cell] [.. row.cells].entries() { 控制台(“[$ [$],$ [j]]] = ${cell.innerText}”) 的 的 < div id = " myTabDiv > <table . the 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 >

这个解决方案对我来说非常有效

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

这里有一个使用现代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

我将其保留下来,以供将来参考,以便抓取特定的HTML表列并打印结果。

//select what table you want to scrape (is zero based)
//set 0 if there is only one
setTable=0;
//select what column you want to scrape (is zero based)
//in this case I would be scrapping column 2
setColumnToScrape=1;
var table = document.getElementsByTagName("tbody")[setTable];
for (var i = 0, row; row = table.rows[i]; i++) {
  col = row.cells[setColumnToScrape];
  document.write(col.innerHTML + "<br>");
}