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