<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内部检索每行中每个单元格的值，我该如何操作？
如果你想要遍历每一行(<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
})
})
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>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循环中，行/列迭代器都会增加，并将集合中的新行/单元格对象分配给行/单元格变量。当集合中没有更多的行/单元格时，false被分配给行/单元格变量，并且while循环的迭代停止（退出）。
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。i、j、row和col来混乱你的代码，因此它提供了干净、模块化的代码，不会产生任何副作用（或引发lint/编译器警告）...而且不需要其他库（如jquery）。此外，它还可以让你的代码访问element和index变量，而不仅仅是元素，如果你喜欢隐藏索引，你可以在回调参数列表中忽略它。Array.from。Array.from(tr.cells).forEach((cell, col_ind) => {上遇到了VM150:11 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))的错误。 - undefined以下是使用现代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
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
});
Object.defineProperty必须放在其余代码之前，但它可以工作。@Vineela Thonupunuri，你是否尝试按正确的顺序编写代码？ - FlippingBinaryvar 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 = "";
}
}
我的解决方案，使用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
.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>
} document.writeln("end-itTable"); } 为什么这段代码无法像上面的表格一样循环遍历表格？ - Doug Hauf
table.cellsshim（用于修补一些旧的/面向IE的代码），请参见我的答案以回答问题：Firefox浏览器不识别table.cells吗？。 - GitaarLAB