如果我有一个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?
当前回答
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
其他回答
这个解决方案对我来说非常有效
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 = "";
}
}
var表= . getelementbyid(“mytab1”); var r = 0;//开始计算表中的行数 而(行= table.rows (r + +)) ｛ var c = 0;//开始计数行中的列 而(细胞= row.cells (c++)) ｛ cell.innerHTML = ' [R ' + R + ' C ' + C + '] ';//用cell做某事 ｝ ｝ <表id = " mytab1 " > < tr > A1 < td > < / 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 > 表> < /
每次遍历while循环时，r/c迭代器都会增加，集合中的新行/单元格对象会被赋值给行/单元格变量。当集合中没有更多的行/单元格时，将false赋给行/单元格变量，并通过while循环停止(退出)进行迭代。
使用一个for循环:
var table = document.getElementById('tableID');
var count = table.rows.length;
for(var i=0; i<count; i++) {
console.log(table.rows[i]);
}
这是一个使用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>
这里有一个使用现代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
