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

引言

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

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

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

jQuery的:gt(index)选择器是一个非常强大的工具，它允许我们选择所有索引（从0开始计数）大于给定index的元素。在表格行（

使用: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>

说明：

ChatPDF

使用ChatPDF，您的文档将变得智能!跟你的PDF文件对话，就好像它是一个完全理解内容的人一样。

327

查看详情

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

  JavaScript/jQuery 实现

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

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

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

     登录后复制

  2. 编写切换逻辑： 我们将使用一个布尔变量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，完整的实现如下：

  
  
  
      
      
      
      
      
      
  
  
  
      
  
          
  楼层平面图列表
          

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

  显示更多