![](/img/trans.png)
[英]How do I iterate through table rows and cells in JavaScript and add the values?
[英]How do I iterate through table rows and cells in JavaScript?
如果我有一个 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 中的每一行中的每个单元格检索值?
如果你想遍历每一行( <tr>
),知道/识别行( <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
}
你可以考虑使用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 循环 r/c 迭代器增加时,集合中的新行/单元格对象被分配给行/单元格变量。 当集合中没有更多行/单元格时,将 false 分配给行/单元格变量并在循环停止(退出)时进行迭代。
更好的解决方案:使用 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
可以是Array.from
。
这个解决方案非常适合我
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 = "";
}
}
如果你想要一个功能性的风格,像这样:
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 样式) C#):
Object.defineProperty(HTMLCollection.prototype, "toArray", {
value: function toArray() {
return Array.prototype.slice.call(this, 0);
},
writable: true,
configurable: true
});
您可以使用.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>
使用单个 for 循环:
var table = document.getElementById('tableID');
var count = table.rows.length;
for(var i=0; i<count; i++) {
console.log(table.rows[i]);
}
这是使用现代 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
我将其留作将来用于抓取特定 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>");
}
这是使用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>
我的解决方案,使用 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
纯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>
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.