使用 JavaScript 获取 HTML 表格的行数-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常需要操作 HTML 表格。有时候我们需要获取表格的行数来做进一步的处理，比如对表格进行分页、排序等操作。本文将介绍如何使用 JavaScript 获取 HTML 表格的行数。

1. HTML 表格基础知识

在 HTML 中，可以使用 <table> 元素来创建表格，其中每行用 <tr> 元素定义，每列用 <td> 元素定义。例如：

-- -------------------- ---- -------
-------
  ----
    ----------
    ----------
    ----------
  -----
  ----
    ----------
    ----------
    ----------
  -----
--------

上面的代码会创建一个包含两行三列的表格。

2. 获取表格行数的方法

方法一：使用 table.rows.length

HTML 的 table 对象提供了一个 rows 属性，它返回一个类数组对象，包含表格的所有行。我们可以通过访问 rows.length 属性来获取表格的行数。例如：

const table = document.querySelector('table');
const rowsCount = table.rows.length;
console.log(rowsCount); // 输出结果为 2

方法二：使用 table.tBodies[0].rows.length

如果表格中有多个 tbody 元素，则可以使用 tBodies 属性来获取所有 tbody 元素。由于每个 tbody 元素也有自己的 rows 属性，因此我们需要选择一个 tbody 元素来获取行数。例如：

const table = document.querySelector('table');
const rowsCount = table.tBodies[0].rows.length;
console.log(rowsCount); // 输出结果为 2

方法三：使用 table.getElementsByTagName('tr').length

如果表格中只有一个 tbody 元素或者没有 tbody 元素，那么我们可以使用 getElementsByTagName 方法来获取所有的 tr 元素，然后统计它们的数量来获取行数。例如：

const table = document.querySelector('table');
const rowsCount = table.getElementsByTagName('tr').length;
console.log(rowsCount); // 输出结果为 2

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