JavaScript 获取 HTML 表格的行数答案

【问题标题】：JavaScript to get rows count of a HTML tableJavaScript 获取 HTML 表格的行数
【发布时间】：2020-07-20 17:43:00
【问题描述】：

如何使用 JavaScript 获取具有 id 和名称的 HTML table 的行数？

【问题讨论】：

标签： javascript html

【解决方案1】：

给定一个

<table id="tableId">
    <thead>
        <tr><th>Header</th></tr>
    </thead>
    <tbody>
        <tr><td>Row 1</td></tr>
        <tr><td>Row 2</td></tr>
        <tr><td>Row 3</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Footer</td></tr>
    </tfoot>
</table>

还有一个

var table = document.getElementById("tableId");

有两种计算行数的方法：

var totalRowCount = table.rows.length; // 5
var tbodyRowCount = table.tBodies[0].rows.length; // 3

table.rows.length 返回表中所有<tr> 元素的数量。所以对于上表，它将返回5，而大多数人会真正期望3。 table.tBodies 返回一个包含所有 <tbody> 元素的数组，我们只抓取其中的第一个（我们的表只有一个）。当我们计算它上面的行数时，我们得到3的期望值。

【讨论】：

这也将包括子表的行数：jsfiddle.net/GYstV
我想 OP 没有指定，尽管我认为它暗示它是父表的总行数。但是，此解决方案有助于计算父表及其子表中的所有行；因此，我认为最好在对解决方案的解释中明确这一点。我会编辑以传达这一点，但我没有足够的代表来完成它......
这个答案对我有用，因为我需要考虑 thead/tfoot 并只获取包含数据的行。

【解决方案2】：

您可以使用.rows property 并检查它是.length，如下所示：

var rowCount = document.getElementById('myTableID').rows.length;

【讨论】：

如果表中有class而不是id怎么办？
@SagarKodte 从 getElementsByClassName 获取第一个值。 const rowCount = document.getElementsByClassName('table-xxx')[0].rows.length;

【解决方案3】：

$('tableName').find('tr').length

【讨论】：

或者更好的是$('#tableId tr').length，或者更好的是$('#tableId tbody tr').length。
感谢@SharpC，$('#tableId tbody tr').length 在 google chrome 开发控制台中也很有效。

【解决方案4】：

如果表有ID:

const tableObject = document.getElementById(tableId);
const rowCount = tableObject[1].childElementCount;

如果表有Class:

const tableObject = document.getElementsByClassName(tableClass);
const rowCount = tableObject[1].childElementCount;

如果表有Name:

const tableObject = document.getElementsByTagName('table');
const rowCount = tableObject[1].childElementCount;

注意：索引1代表<tbody>标签

【讨论】：

【解决方案5】：

这是另一种选择，使用 jQuery 并仅获取 tbody 行（包含数据）并取消考虑 thead/tfoot。

$("#tableId > tbody > tr").length

console.log($("#myTableId &gt; tbody &gt; tr").length);

.demo {
   width:100%;
   height:100%;
   border:1px solid #C0C0C0;
   border-collapse:collapse;
   border-spacing:2px;
   padding:5px;
}

.demo caption {
   caption-side:top;
   text-align:center;
}

.demo th {
   border:1px solid #C0C0C0;
   padding:5px;
   background:#F0F0F0;
}

.demo td {
   border:1px solid #C0C0C0;
   text-align:left;
   padding:5px;
   background:#FFFFFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTableId" class="demo">
   <caption>Table 1</caption>
   <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td colspan=4 style="background:#F0F0F0">&nbsp; </td>
      </tr>
   </tfoot>
</table>

【讨论】：