单按钮控制动态表格行展开与折叠教程：基于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进行事件绑定和内容更新。

    
        
             
Floor Plan
            
Dimension
            
Price
        
    
    
                
内容1
尺寸1
价格1
        
内容2
尺寸2
价格2
        
内容3
尺寸3
价格3
                
内容4
尺寸4
价格4
        
内容5
尺寸5
价格5
            

        显示更多 

说明：

为了确保选择器的准确性，我们为

JavaScript/jQuery 实现

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

引入 jQuery 库： 确保在您的脚本运行之前，页面中已经引入了jQuery库。您可以从CDN引入，例如：

编写切换逻辑：我们将使用一个布尔变量isShown来跟踪当前表格行的显示状态（true表示所有行都已显示，false表示只有默认行可见）。

    // 确保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('显示更多 ');                isShown = false; // 更新状态为“未显示所有”            } else {                // 当前是“显示更少”状态，点击后应“显示所有”                $("table.tablec tbody tr:gt(2)").show(); // 显示第4行及之后的所有行                // 更新按钮文本和图标                $(this).html('显示更少 ');                isShown = true; // 更新状态为“已显示所有”            }        });    });

完整示例代码

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

                                /* 示例样式，可根据您的项目调整 */        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;        }        
        
楼层平面图列表
        

平面图	尺寸	价格
	客厅 10x12ft 120 Sqft	获取报价
	卧室 11x13ft 143 Sqft	获取报价
	厨房 8x10ft 80 Sqft	获取报价
	书房 9x9ft 81 Sqft	获取报价
	阳台 5x10ft 50 Sqft	获取报价
	储藏室 6x6ft 36 Sqft	获取报价
	花园 20x15ft 300 Sqft	获取报价
	车库 12x20ft 240 Sqft	获取报价