如果我有一个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?


当前回答

如果你想要一个函数式的样式,像这样:

    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风格):

    Object.defineProperty(HTMLCollection.prototype, "toArray", {
        value: function toArray() {
            return Array.prototype.slice.call(this, 0);
        },
        writable: true,
        configurable: true
    });

其他回答

使用一个for循环:

var table = document.getElementById('tableID');  
var count = table.rows.length;  
for(var i=0; i<count; i++) {    
    console.log(table.rows[i]);    
}

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 >

我的解决方案,使用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

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循环停止(退出)进行迭代。

您可以使用. 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 >