如何在JavaScript中遍历表行和单元格?

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

您可以考虑使用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; //start counting rows in table
while(row=table.rows[r++])
{
var c=0; //start counting columns in row
while(cell=row.cells[c++])
{
cell.innerHTML='[R'+r+'C'+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循环停止(退出)进行迭代。

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

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

试一试

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

for ( let [i,row] of [...mytab1.rows].entries() )
{
for( let [j,cell] of [...row.cells].entries() )
{
console.log(`[${i},${j}] = ${cell.innerText}`)
}
}

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

你可以使用.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，可选地与子组合子(>)一起使用(如果你有一个表中表，这可能很有用):

const cells = document.querySelectorAll('tr:nth-child(2) > 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>

如果你想要一个函数式的样式，像这样:

    const table = document.getElementById("mytab1");
const cells = table.rows.toArray()
.flatMap(row => row.cells.toArray())
.map(cell => cell.innerHTML); //["col1 Val1", "col2 Val2", "col1 Val3", "col2 Val4"]

你可以修改HTMLCollection的原型对象(允许以类似于c#中的扩展方法的方式使用)，并嵌入一个将集合转换为数组的函数，允许使用具有上述风格的高阶函数(类似于c#中的linq风格):

    Object.defineProperty(HTMLCollection.prototype, "toArray", {
value: function toArray() {
return Array.prototype.slice.call(this, 0);
},
writable: true,
configurable: true
});

更好的解决方案:使用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.colIndex，而不是使用row_ind和col_ind。

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

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

使用一个for循环:

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

我把这个留给将来参考刮一个特定的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>");
}

这是使用childNodes和HTMLCollection的不同方法

    <script>
var tab = document.getElementsByTagName("table")
for (var val of tab[0].childNodes[1].childNodes.values())
if (HTMLCollection.prototype.isPrototypeOf(val.children)) {
for (var i of val.children) {
console.log(i.childNodes[0])
}
}
</script>

我的解决方案，使用es6:

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


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


console.log(data)

纯Javascript

function numberofRow(){
var x = document.getElementById("mytab1").rows.length;
document.getElementById("mytab1").innerHTML = x;
}
numberofRow();

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

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

这里有一个使用现代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数组，你可以迭代。

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

使用row.cells的文档:https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement