单按钮控制动态表格行展开与折叠教程：基于jQuery的优化实现-php教程-PHP中文网

单按钮控制动态表格行展开与折叠教程：基于jQuery的优化实现

本教程详细介绍了如何利用jQuery实现动态生成表格行的显示与隐藏功能。通过一个单一按钮，用户可以轻松地在默认显示少量行和显示所有行之间进行切换，并动态更新按钮文本，优化了用户体验和代码效率，避免了冗余的JavaScript代码和服务器负担。

引言

在网页开发中，尤其是在展示大量数据时，为了提升用户体验和页面加载性能，常常需要对动态生成的表格行进行管理。一个常见的需求是：默认只显示表格的前几行，而将其余行隐藏起来。用户可以通过点击一个按钮来“显示更多”隐藏的行，并在显示所有行后，该按钮又变为“显示更少”，以便将表格恢复到初始状态。

传统的实现方式可能涉及为每个需要隐藏的行手动指定ID，并通过多个JavaScript函数（如show()和hide())来分别控制这些行的显示与隐藏，这种方法不仅代码冗余、难以维护，而且随着表格行数的增加，维护成本会急剧上升。本教程将介绍一种更优雅、高效的解决方案，利用jQuery的强大选择器和事件处理能力，通过一个单一按钮实现这一功能。

核心概念：jQuery :gt() 选择器

jQuery的:gt(index)选择器是一个非常强大的工具，它允许我们选择所有索引（从0开始计数）大于给定index的元素。在表格行（zuojiankuohaophpcntr>）的场景中，如果我们希望隐藏从第四行开始的所有行，由于索引从0开始，那么前三行的索引分别是0、1、2。因此，我们需要选择索引大于2的行，即tr:gt(2)。

使用:gt()选择器的好处是，无论表格有多少行，我们都不需要关心具体的ID或数量，只需要指定一个阈值即可。这大大简化了代码，并提高了其可维护性和灵活性。

HTML 结构调整

为了实现单一按钮的切换功能，我们需要对HTML结构进行简化。将原有的“Show All”和“Show Less”两个按钮合并为一个，并为其添加一个唯一的ID，以便通过JavaScript进行事件绑定和内容更新。

<!-- 假设这是您的表格部分 -->
<table width="100%" cellspacing="10" cellpadding="10" class="tablec">
    <thead>
        <tr> 
            <th><strong>Floor Plan</strong></th>
            <th><strong>Dimension</strong></th>
            <th><strong>Price</strong></th>
        </tr>
    </thead>
    <tbody>
        <!-- PHP 动态生成的前3行，这些行默认可见 -->
        <tr id="row-1" class="table-row"><td>内容1</td><td>尺寸1</td><td>价格1</td></tr>
        <tr id="row-2" class="table-row"><td>内容2</td><td>尺寸2</td><td>价格2</td></tr>
        <tr id="row-3" class="table-row"><td>内容3</td><td>尺寸3</td><td>价格3</td></tr>
        <!-- PHP 动态生成的第4行及之后，这些行将被控制显示/隐藏 -->
        <tr id="row-4" class="table-row"><td>内容4</td><td>尺寸4</td><td>价格4</td></tr>
        <tr id="row-5" class="table-row"><td>内容5</td><td>尺寸5</td><td>价格5</td></tr>
        <!-- ... 更多动态生成的表格行 ... -->
    </tbody>
</table>
<br>
<div class="wrapperr">
    <!-- 合并为一个按钮，并添加ID -->
    <button class="btn btn-primary" id="toggleRowsBtn">显示更多 <i class="fa fa-arrow-down" style="font-size:14px"></i></button>
</div>

登录后复制

说明：

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

为了确保选择器的准确性，我们为<table>添加了class="tablec"，并为所有<tr>添加了class="table-row"。
按钮的初始文本设置为“显示更多”，因为默认状态下会有行被隐藏。

JavaScript/jQuery 实现

现在，我们将使用jQuery来编写逻辑，实现表格行的显示/隐藏切换。

引入 jQuery 库： 确保在您的脚本运行之前，页面中已经引入了jQuery库。您可以从CDN引入，例如：
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
```
登录后复制
编写切换逻辑： 我们将使用一个布尔变量isShown来跟踪当前表格行的显示状态（true表示所有行都已显示，false表示只有默认行可见）。

<script>
    // 确保DOM加载完成后再执行脚本
    jQuery(document).ready(function($) {
        var isShown = false; // 初始状态为“未显示所有”，即只显示了默认的前3行

        // 页面加载时，隐藏所有表格中索引大于2的行（即第4行及之后的所有行）
        // 这里的选择器是针对 class 为 tablec 的表格内的 tbody 里的 tr 元素
        $("table.tablec tbody tr:gt(2)").hide();

        // 为按钮绑定点击事件
        $("#toggleRowsBtn").on("click", function() {
            if (isShown) {
                // 当前是“显示所有”状态，点击后应“显示更少”
                $("table.tablec tbody tr:gt(2)").hide(); // 隐藏第4行及之后的所有行
                // 更新按钮文本和图标
                $(this).html('显示更多 <i class="fa fa-arrow-down" style="font-size:14px"></i>');
                isShown = false; // 更新状态为“未显示所有”
            } else {
                // 当前是“显示更少”状态，点击后应“显示所有”
                $("table.tablec tbody tr:gt(2)").show(); // 显示第4行及之后的所有行
                // 更新按钮文本和图标
                $(this).html('显示更少 <i class="fa fa-arrow-up" style="font-size:14px"></i>');
                isShown = true; // 更新状态为“已显示所有”
            }
        });
    });
</script>

登录后复制

完整示例代码

结合HTML和JavaScript，完整的实现如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格行显示/隐藏</title>
    <!-- 引入Font Awesome图标库，如果需要显示图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        /* 示例样式，可根据您的项目调整 */
        body { font-family: Arial, sans-serif; margin: 20px; }
        table { width: 80%; border-collapse: collapse; margin-bottom: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .btn {
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
        }
        .btn:hover {
            background-color: #0056b3;
        }
        .wrapperr {
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h2>楼层平面图列表</h2>
        <table width="100%" cellspacing="10" cellpadding="10" class="tablec">
            <thead>
                <tr> 
                    <th><strong>平面图</strong></th>
                    <th><strong>尺寸</strong></th>
                    <th><strong>价格</strong></th>
                </tr>
            </thead>
            <tbody>
                <!-- 模拟PHP动态生成的前3行 -->
                <tr id="row-1" class="table-row"><td><img src="https://via.placeholder.com/100x100?text=Plan1" alt="Plan 1"></td><td>客厅 10x12ft<br><b>120 Sqft</b></td><td><button class="btn btn-primary">获取报价</button></td></tr>
                <tr id="row-2" class="table-row"><td><img src="https://via.placeholder.com/100x100?text=Plan2" alt="Plan 2"></td><td>卧室 11x13ft<br><b>143 Sqft</b></td><td><button class="btn btn-primary">获取报价</button></td></tr>
                <tr id="row-3" class="table-row"><td><img src="https://via.placeholder.com/100x100?text=Plan3" alt="Plan 3"></td><td>厨房 8x10ft<br><b>80 Sqft</b></td><td><button class="btn btn-primary">获取报价</button></td></tr>

                <!-- 模拟PHP动态生成的第4行及之后，这些行将被控制 -->
                <tr id="row-4" class="table-row"><td><img src="https://via.placeholder.com/100x100?text=Plan4" alt="Plan 4"></td><td>书房 9x9ft<br><b>81 Sqft</b></td><td><button class="btn btn-primary">获取报价</button></td></tr>
                <tr id="row-5" class="table-row"><td><img src="https://via.placeholder.com/100x100?text=Plan5" alt="Plan 5"></td><td>阳台 5x10ft<br><b>50 Sqft</b></td><td><button class="btn btn-primary">获取报价</button></td></tr>
                <tr id="row-6" class="table-row"><td><img src="https://via.placeholder.com/100x100?text=Plan6" alt="Plan 6"></td><td>储藏室 6x6ft<br><b>36 Sqft</b></td><td><button class="btn btn-primary">获取报价</button></td></tr>
                <tr id="row-7" class="table-row"><td><img src="https://via.placeholder.com/100x100?text=Plan7" alt="Plan 7"></td><td>花园 20x15ft<br><b>300 Sqft</b></td><td><button class="btn btn-primary">获取报价</button></td></tr>
                <tr id="row-8" class="table-row"><td><img src="https://via.placeholder.com/100x100?text=Plan8" alt="Plan 8"></td><td>车库 12x20ft<br><b>240 Sqft</b></td><td><button class="btn btn-primary">获取报价</button></td></tr>
            </tbody>
        </table> 
        <div class="wrapperr">
            <button class="btn btn-primary" id="toggleRowsBtn">显示更多 <i class="fa fa-arrow-down" style="font-size:14px"></i></button>
        </div>
    </div>

    <!-- 引入jQuery库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
            var isShown = false; // 初始状态为“未显示所有”

            // 页面加载时隐藏第4行及之后的所有行
            // :gt(2) 表示索引大于2的行，即第3行之后（从0开始计数）
            $("table.tablec tbody tr:gt(2)").hide();

            // 为按钮绑定点击事件
            $("#toggleRowsBtn").on("click", function() {
                if (isShown) {
                    // 当前是“显示所有”状态，点击后应“显示更少”
                    $("table.tablec tbody tr:gt(2)").hide();
                    $(this).html('显示更多 <i class="fa fa-arrow-down" style="font-size:14px"></i>');
                    isShown = false;
                } else {
                    // 当前是“显示更少”状态，点击后应“显示所有”
                    $("table.tablec tbody tr:gt(2)").show();
                    $(this).html('显示更少 <i class="fa fa-arrow-up" style="font-size:14px"></i>');
                    isShown = true;
                }
            });
        });
    </script>

</body>
</html>

登录后复制

注意事项

jQuery 引入： 确保您的页面在执行上述JavaScript代码之前已经正确引入了jQuery库。如果未引入，代码将无法正常工作。
选择器精度： 如果您的页面中有多个表格，请使用更具体的jQuery选择器（例如$("#yourTableId tbody tr:gt(2)") 或 $("table.yourClass tbody tr:gt(2)")）来确保只操作目标表格，避免意外影响其他元素。
初始状态： 务必在$(document).ready()中设置初始的隐藏状态和按钮文本，以保证页面加载时的正确显示。
可访问性： 为了提高可访问性，可以考虑为切换按钮添加aria-expanded属性，并在切换状态时更新其值。例如，当显示所有行时，aria-expanded="true"；当隐藏行时，aria-expanded="false"。
性能考量： 这种客户端解决方案完全避免了服务器端脚本的重复执行，大大减轻了服务器负担。然而，如果表格包含成千上万行数据，前端操作仍然可能导致短暂的性能延迟。对于极端大量的数据，可以考虑采用前端分页、虚拟滚动或无限滚动等更高级的优化策略。

总结

通过本教程，我们学习了如何利用jQuery的:gt()选择器和简单的JavaScript逻辑，实现一个高效且用户友好的动态表格行显示/隐藏切换功能。这种方法不仅显著减少了代码量和维护成本，而且通过一个单一的按钮提供了直观的操作体验。它避免了手动管理大量元素ID的繁琐，是处理类似动态内容展示需求的推荐实践。

以上就是单按钮控制动态表格行展开与折叠教程：基于jQuery的优化实现的详细内容，更多请关注php中文网其它相关文章！