如何在 JavaScript 中遍历表格行和单元格？
Posted
技术标签:
【中文标题】如何在 JavaScript 中遍历表格行和单元格？【英文标题】：How do I iterate through table rows and cells in JavaScript? 【发布时间】：2011-03-05 04:00:52 【问题描述】：如果我有一个 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 中检索每行中每个单元格的值？
【问题讨论】：
【参考方案1】：如果你想遍历每一行（<tr>），了解/识别行（<tr>），并遍历每一行的每一列（<td>）（<tr>），那么这是要走的路。
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
【讨论】：
ex2，table.cells 不兼容浏览器 @WilliamRemacle 我差不多 4 年前发布了这个答案。当时甚至连 IE 9 都没有想到！ @JohnHartsock 我知道，但我使用了您的解决方案并发现它不适用于 IE。这只是警告其他人的评论......无论如何我都投票赞成你的答案;-) 函数 itTable() document.writeln("itTable"); var table = document.getElementById("mytab"); for (var i = 0, row; row = table.rows[i]; i++) document.writeln(i); for (var j = 0, col; col = row.cells[j]; j++) document.writeln(j); document.writeln("end-itTable");为什么这段代码不能让我遍历类似于上面的表格。 对于那些（通过 google 来到这里）需要为table.cells 提供 简单和小型 shim（以修补一些旧的/面向 IE 的代码）的人，请参阅 my answer到Q: Does Firefox browser not recognize table.cells?【参考方案2】：
您可以考虑使用 jQuery。使用 jQuery 非常简单，可能看起来像这样：
$('#mytab1 tr').each(function()
$(this).find('td').each(function()
//do your stuff, you can use $(this) to get current cell
)
)
【讨论】：
不能使用 jquery...公司不允许。不要问为什么。 这是一个疯狂的政策。您总是可以从 jQuery 复制并粘贴您需要的相关函数到您自己的应用程序代码中。除非有禁止在线使用他人代码的政策，否则你就不会在这里。 @Judy：不同意“疯狂政策”.... 有很多理由不使用 jQuery 禁止使用 JQuery 的另一个原因是嵌入式网站，例如我正在使用一个嵌入式 WiFi 芯片，整个网站只有 250Kb。所有图像都按原样压缩。 jQuery 在你需要 2-3 个函数的地方没用。与 php 一起编码时速度慢且令人困惑。【参考方案3】：试试
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>【讨论】：
我会说干净 注意循环中的“for ... of”。很高兴在您的回答中有一些解释。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 简单、优雅、实用，贡献卓越【参考方案4】：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 循环停止（退出）迭代。
【讨论】：
在上一篇文章中：while (cell=row[r].cells[c++] 应该是 row.cells[c++]，row 是当前对象，以及 sth 代码的示例：mycoldata = cell.innerHTML【参考方案5】：更好的解决方案：使用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）。
如果您需要它在旧版本（ES2015 之前）的 Javascript 中运行，Array.from 可以被填充。
【讨论】：
【参考方案6】：如果你想要一个具有功能风格的，像这样：
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
);
【讨论】：
Uncaught TypeError: Cannot read property 'toArray' of undefined --> 这是我在尝试这个解决方案时得到的。 奇怪。我又试了一次，它奏效了。不过，我无法重现您指出的错误。可能问题出在浏览器上。我使用 Edge 和 IE 进行了测试，但都没有工作。 Chrome、Firefox 和 Safari 运行正常。 我也用过chrome。 这也适用于我。Object.defineProperty 显然必须在其余代码之前，但它有效。 @Vineela Thonupunuri 您是否按照正确的顺序使用代码进行了尝试？【参考方案7】：
这个解决方案非常适合我
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 吗？因为你的 for 循环看起来有点像 PHP。 当您知道要查找什么时，许多语言惊人地相似。 PHP 会在每个变量前使用 $ ，但不会。 var 也是 JavaScript 使用的关键字，而不是 PHP，尽管如果他们添加它，我可能会错过它。 - edit- gah no enter for newline... 正如我所说：逻辑是通用的。知道如何将其转录成其他语言是一项非常有用的技能，学习起来并不难——我们是具有出色模式匹配能力的智慧生物。识别每种语言之间的变化或简单地使用词法分析器语言定义... 如果您在回答问题# of rows 没有说什么...请使用完整代码更新您的答案。【参考方案8】：
您可以使用 .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">
<tr>
<td>col1 Val1</td>
<td>col2 Val2</td>
</tr>
<tr>
<td>col1 Val3</td>
<td>col2 Val4</td>
</tr>
</table>【讨论】：
修改所有单元格的最简单方法。我用它来删除单元格样式。【参考方案9】：使用单个for循环：
var table = document.getElementById('tableID');
var count = table.rows.length;
for(var i=0; i<count; i++)
console.log(table.rows[i]);
【讨论】：
【参考方案10】：这是使用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>
【讨论】：
【参考方案11】：我将其留作将来抓取特定 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>");
【讨论】：
【参考方案12】：我的解决方案，使用 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
【讨论】：
【参考方案13】：纯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>【讨论】：
【参考方案14】：这是使用现代 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 数组。
【讨论】：
【参考方案15】：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 中遍历表格行和单元格？的主要内容，如果未能解决你的问题，请参考以下文章