如果我有一个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>),那么这就是要走的路。
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
}
您可以使用. 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 >