在前端开发中，经常需要操作 HTML 表格。有时候我们需要获取表格的行数来做进一步的处理，比如对表格进行分页、排序等操作。本文将介绍如何使用 JavaScript 获取 HTML 表格的行数。
1. HTML 表格基础知识
在 HTML 中，可以使用 <table> 元素来创建表格，其中每行用 <tr> 元素定义，每列用 <td> 元素定义。例如：
-------
----
----------
----------
----------
-----
----
----------
----------
----------
-----
--------上面的代码会创建一个包含两行三列的表格。
2. 获取表格行数的方法
方法一：使用 table.rows.length
HTML 的 table 对象提供了一个 rows 属性，它返回一个类数组对象，包含表格的所有行。我们可以通过访问 rows.length 属性来获取表格的行数。例如：
----- ----- - -------------------------------- ----- --------- - ------------------ ----------------------- -- ----- -
方法二：使用 table.tBodies[0].rows.length
如果表格中有多个 tbody 元素，则可以使用 tBodies 属性来获取所有 tbody 元素。由于每个 tbody 元素也有自己的 rows 属性，因此我们需要选择一个 tbody 元素来获取行数。例如：
----- ----- - -------------------------------- ----- --------- - ----------------------------- ----------------------- -- ----- -
方法三：使用 table.getElementsByTagName('tr').length
如果表格中只有一个 tbody 元素或者没有 tbody 元素，那么我们可以使用 getElementsByTagName 方法来获取所有的 tr 元素，然后统计它们的数量来获取行数。例如：
----- ----- - -------------------------------- ----- --------- - ---------------------------------------- ----------------------- -- ----- -
3. 示例代码
下面是一个完整的示例代码，演示了如何使用上述三种方法来获取表格的行数：
--------- -----
------
------
----- ----------------
---------------------
-------
------
-------
----
----------
----------
----------
-----
----
----------
----------
----------
-----
--------
--------
----- ----- - --------------------------------
-- ------ -----------------
----- ---------- - ------------------
------------------------
-- ------ ----------------------------
----- ---------- - -----------------------------
------------------------
-- ------ ---------------------------------------
----- ---------- - ----------------------------------------
------------------------
---------
-------
-------4. 总结
本文介绍了如何使用 JavaScript 获取 HTML 表格的行数，总结如下：
- 使用
table.rows.length可以获取表格的行数。 - 如果表格中有多个 tbody 元素，则可以使用
table.tBodies[0].rows.length来获取行数。 - 如果表格中只有一个 tbody 元素或者没有 tbody 元素，则可以使用
table.getElementsByTagName('tr').length来获取行数。
希望本文对你学习 JavaScript 和前端开发有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26777