如果我有一个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?
当前回答
这里有一个使用现代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
其他回答
这里有一个使用现代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
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 >
您可以使用. queryselectorall()来选择所有td元素，然后使用. foreach()循环这些元素。它们的值可以用.innerHTML检索:
管理细胞=文档。 细胞. forEach(功能(细胞){ 控制台日志(细胞。innerHTML); }) <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 >
如果你只想从一个特定的行中选择列，你可以使用伪类:n -child()来选择一个特定的tr，可选地结合子组合子(>)(如果你有一个表中表):
const细胞=文档。 细胞. forEach(功能(细胞){ 控制台日志(细胞。innerHTML); }) <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 >
使用一个for循环:
var table = document.getElementById('tableID');
var count = table.rows.length;
for(var i=0; i<count; i++) {
console.log(table.rows[i]);
}
更好的解决方案:使用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。而不是使用row_ind和col_ind。
我更喜欢这种方法，而不是前2个投票最多的答案，因为它不会让你的代码与全局变量I, j, row和col混淆，因此它提供了干净的，模块化的代码，不会有任何副作用(或提高lint /编译器警告)…没有其他库(例如jquery)。此外，它使您的代码可以访问元素和索引变量，而不仅仅是元素，如果您喜欢隐藏索引，您可以在回调参数列表中忽略它。
如果你需要在旧版本(es2015之前)的Javascript中运行，Array.from可以被填充。
