jquery判断tr行是显示还是隐藏记录行数

原创

mob64ca12d7c9ee 2024-08-27 06:29:34 ©著作权

文章标签 jQuery HTML html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d7c9ee的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 jQuery 判断表格行的显示与隐藏状态

在现代网页开发中，操作 DOM 元素是日常工作的一部分。特别是对于表格中的行，我们常常需要判断这些行是显示状态还是隐藏状态。今天，我们将学习如何使用 jQuery 来实现这一功能。本文将详细介绍所需的步骤和相关代码。

整体流程

步骤	描述
1	引入 jQuery 库
2	创建一个 HTML 表格
3	编写 jQuery 代码判断行状态
4	运行代码并观察效果

步骤详解

第一步：引入 jQuery 库

在使用 jQuery 前，需要在 HTML 文档中引用 jQuery 库，可以通过 CDN 引入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>判断行的显示和隐藏</title>
    <!-- 引入 jQuery -->
    <script src="
</head>
<body>

第二步：创建一个 HTML 表格

接下来，创建一个简单的 HTML 表格，这样我们就有了可以测试的结构：

<table id="myTable">
    <tr>
        <th>名称</th>
        <th>状态</th>
    </tr>
    <tr>
        <td>项目1</td>
        <td>活动</td>
    </tr>
    <tr style="display: none;">
        <td>项目2</td>
        <td>已完成</td>
    </tr>
    <tr>
        <td>项目3</td>
        <td>活动</td>
    </tr>
</table>

第三步：编写 jQuery 代码判断行状态

我们将使用 jQuery 来循环遍历表格的行，检查每一行的显示状态，并记录显示的行数。

<script>
    $(document).ready(function() {
        var visibleRowsCount = 0; // 初始化可见行数

        // 遍历表格中的每一行
        $('#myTable tr').each(function() {
            // 判断当前行是否可见
            if ($(this).is(':visible')) {
                visibleRowsCount++; // 如果可见，计数加1
            }
        });

        // 输出结果
        console.log("可见的行数为: " + visibleRowsCount);
    });
</script>

第四步：运行代码并观察效果

将上述 HTML 和 jQuery 代码组合在一起并运行。打开浏览器控制台（通常为 F12），你将看到可见行数的输出。

</body>
</html>

旅行图示例

journey
    title 判断行的显示状态
    section 初始化
      在 HTML 中引用 jQuery: 5: 开始
    section 创建表格
      创建包含三行的表格: 4: 进行中
    section 编写代码
      使用 jQuery 统计可见行: 3: 进行中
    section 运行代码
      查看控制台输出: 2: 完成

类图示例

classDiagram
    class Table {
        +tr[] rows
        +countVisibleRows() int
    }
    class Row {
        +visibility: boolean
    }
    Table --> Row : contains