Question

如果我有一个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中检索每行中每个单元格的值？

Answer 1

如果你想要遍历每一行（<tr>），知道/识别行（<tr>），并遍历每一行的每一列（<td>）（{{ 1}}），这就是要走的路。

<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>

Answer 2

您可以考虑使用jQuery。使用jQuery，它非常简单，可能看起来像这样：

$('#mytab1 tr').each(function(){
    $(this).find('td').each(function(){
        //do your stuff, you can use $(this) to get current cell
    })
})

Answer 3

var table=document.getElementById("mytab1");
var r=0;
while(row=table.rows[r++])
{
  var c=0;
  while(cell=row.cells[c++])
  {
    cell.innerHTML='[Row='+r+',Col='+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会被分配给行/单元格，而迭代则会循环停止（退出）。

Answer 4

尝试

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>

Answer 5

这个解决方案非常适合我

<system.serviceModel>
    <bindings>
      <basicHttpBinding>
        <binding maxBufferPoolSize="2147483647" maxBufferSize="2147483647" maxReceivedMessageSize="2147483647" messageEncoding="Text">
          <readerQuotas maxDepth="2000000" maxStringContentLength="2147483647" maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxNameTableCharCount="2147483647" />

         <security mode="Transport"></security>

        </binding>
      </basicHttpBinding>
    </bindings>
    <behaviors>
      <serviceBehaviors>
        <behavior>

          <serviceMetadata httpsGetEnabled="true" httpGetEnabled="true"/>
          <serviceCredentials>
             <serviceCertificate findValue="<thumbprint>" storeLocation="LocalMachine"
             storeName="My" x509FindType="FindByThumbprint" />
          </serviceCredentials>

          <serviceDebug includeExceptionDetailInFaults="true"/>
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true"/>
  </system.serviceModel>

Answer 6

更好的解决方案：使用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使代码混乱，因此，它提供了干净，模块化的代码，而没有其他库（例如jquery），不会产生任何副作用（或引起lint /编译器警告）...

如果您要求此代码在Javascript的旧版本（ES2015之前的版本）中运行，可以Array.from进行填充。

Answer 7

您可以使用 .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，还可以结合使用 child combinator (>) （如果表中有表，则很有用）：

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>

Answer 8

如果您想要一种具有功能性的样式，例如：

    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
    });

Answer 9

使用单个for循环：

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

Answer 10

我将其留作将来抓取特定 HTML 表格列并打印结果的参考。

struct

Answer 11

这是使用 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>

Answer 12

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

Answer 13

纯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>

如何在JavaScript中遍历表行和单元格？

13 个答案: