如果我有一个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?
当前回答
使用一个for循环:
var table = document.getElementById('tableID');
var count = table.rows.length;
for(var i=0; i<count; i++) {
console.log(table.rows[i]);
}
其他回答
使用一个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可以被填充。
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
如果你想遍历每一行(<tr>)，知道/识别行(<tr>)，并遍历每行(<tr>)的每一列(<td>)，那么这就是要走的路。
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
}
我将其保留下来，以供将来参考，以便抓取特定的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>");
}
