JavaScript 获取 HTML 表格的行数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3053503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript to get rows count of a HTML table
提问by kawtousse
How to get with JavaScript the rows count of a HTML tablehaving id and name?
如何使用 JavaScript 获取table具有 id 和 name的 HTML 的行数？
回答by BalusC
Given a
给定一个
<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>
and a
和一个
var table = document.getElementById("tableId");
there are two ways to count the rows:
有两种方法可以计算行数：
var totalRowCount = table.rows.length; // 5
var tbodyRowCount = table.tBodies[0].rows.length; // 3
The table.rows.lengthreturns the amount of ALL <tr>elements within the table. So for the above table it will return 5while most people would really expect 3. The table.tBodiesreturns an array of all <tbody>elements of which we grab only the first one (our table has only one). When we count the rows on it, then we get the expected value of 3.
所述table.rows.length返回所有的量<tr>的表格中的元素。所以对于上表，它会返回，5而大多数人真的会期待3。将table.tBodies返回所有的数组<tbody>，而我们只抢到第一个元素（我们的表只有一个）。当我们计算其上的行数时，我们得到 的期望值3。
回答by Nick Craver
You can use the .rowspropertyand check it's .length, like this:
var rowCount = document.getElementById('myTableID').rows.length;
回答by DaveOz
$('tableName').find('tr').length
回答by Gufran Hasan
If the table has an ID:
如果表有一个ID：
const tableObject = document.getElementById(tableId);
const rowCount = tableObject[1].childElementCount;
If the table has a Class:
如果表有一个Class：
const tableObject = document.getElementsByClassName(tableClass);
const rowCount = tableObject[1].childElementCount;
If the table has a Name:
如果表有一个Name：
const tableObject = document.getElementsByTagName('table');
const rowCount = tableObject[1].childElementCount;
Note:index 1represents <tbody>tag
注：索引1代表<tbody>标签
回答by Souza
This is another option, using Jquery and getting only tbodyrows (with the data) and desconsidering thead/tfoot.
这是另一种选择，使用 Jquery 并仅获取tbody行（带有数据）并取消考虑thead/tfoot.
$("#tableId > tbody > tr").length
$("#tableId > tbody > tr").length
console.log($("#myTableId > tbody > 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> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=4 style="background:#F0F0F0"> </td>
</tr>
</tfoot>
</table>