javascript - 如何在具有多个表的树中找到 <td> 的最大数量-JS

Question

我的 dOM 树中有多个表，我想计算每个表中的单元格数量。

代码:

function tree() {
    var table = document.getElementsByTagName('table');
    for (var p = 0, tr; tr= table[p]; p++) {
      for (var i =0, row; row = tr.rows[i]; i++) {
         console.log(row.cells.length)
      }
    }
}

console.log(树())

html:

<table>
   <tr>
            <td>First</td>
            <td>row</td>
        </tr>
        <tr>
            <td>and</td>
            <td>second</td>
        </tr>
</table>
<table>
   <tr>
            <td>First</td>
            <td>row</td>
        </tr>
</table>

第一个有 4 个单元格，第二个有 2 个单元格，我想打印出表格中计数最大的单元格。因此，o/p 将是:

4

我上面的js代码，返回表格中所有单元格的总长度。如何遍历树中的表并找到最大的单元格数？

谢谢!

Answer 1

使用querySelectorAll()来简化这个。

下面的代码将输出4，如您的OP中所示。这是一个简单的修改，以获得具有最多单元格的表格，我怀疑这就是你的意思(不清楚)。

// Get your list of all tables in the document.
const tables = document.querySelectorAll('table');

// Map list of tables to list of number of <td> elements.
const lengths = 
  Array.from(tables)
    .map(table => table.querySelectorAll('td').length)

// Get the max of the list of lengths and log to console.
const max = Math.max(...lengths);
console.log(max);

<table>
  <tr>
    <td>First</td>
    <td>row</td>
   </tr>
   <tr>
     <td>and</td>
     <td>second</td>
  </tr>
</table>
<table>
  <tr>
    <td>First</td>
    <td>row</td>
  </tr>
</table>