当前位置：首页 > 文章列表 > 文章 > 前端 > jQuery实现表格内容折叠展开方法

jQuery实现表格内容折叠展开方法

2025-07-16 13:25:52 0浏览收藏

从现在开始，努力学习吧！本文《HTML表格实现数据折叠展开的常见方式有以下几种：1. 使用 JavaScript + CSS 实现动态折叠这是最常见的方式，通过 JavaScript 控制隐藏和显示内容，结合 CSS 设置样式。优点：灵活、兼容性好缺点：需要编写 JS 代码示例代码：

点击展开/折叠
这里是折叠的内容。

2. 使用

和

标签（HTML5）这是原生 HTML 实现折叠的简单方法，无需 JavaScript。优点：无需 JS，语义化强缺点：样式较固定，自定义难度大示例代码：

点击展开/折叠

这里是折叠的内容。

3. **使用 jQuery 插》

主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

1.纯CSS方案使用details和summary标签实现折叠展开，无需JavaScript，但兼容性较差；2.JavaScript通过切换类名控制显示隐藏，灵活且兼容性好，但需编写脚本；3.借助jQuery等库可简化代码，但依赖外部框架。优化用户体验可通过添加动画、状态保持、无障碍支持等方式实现。复杂表格可采用递归、树形数据结构或组件化管理。移动端适配需注重响应式设计、操作简化和性能优化。

HTML表格如何实现数据的折叠展开？有哪些方式？

HTML表格数据的折叠展开，简单来说，就是控制表格行（）的显示与隐藏，让用户可以按需查看详细信息，避免表格过于冗长。

实现表格数据折叠展开的方法有很多，主要围绕着CSS和JavaScript展开，具体选哪种，取决于你的项目需求和技术栈。

解决方案

纯CSS方案（借助details和summary标签）：

这是一种比较现代且语义化的方法，不需要JavaScript。核心在于使用

和

标签。

标签的内容会始终显示，点击后会展开或折叠

标签内的内容。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>详情</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>30</td>
      <td>
        <details>
          <summary>点击查看详情</summary>
          <p>联系方式：138xxxxxxxx</p>
          <p>地址：北京市海淀区</p>
        </details>
      </td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>
        <details>
          <summary>点击查看详情</summary>
          <p>联系方式：139xxxxxxxx</p>
          <p>地址：上海市浦东新区</p>
        </details>
      </td>
    </tr>
  </tbody>
</table>

优点： 无需JavaScript，简单易用，语义化好。

缺点： 样式定制可能稍微麻烦一些，兼容性方面，老版本浏览器可能不支持。

JavaScript控制CSS类名：

这是比较常见的做法，通过JavaScript监听点击事件，然后切换表格行的CSS类名，控制其显示或隐藏。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>30</td>
      <td><button class="toggle-btn" data-target="detail-1">展开/折叠</button></td>
    </tr>
    <tr class="detail-row" id="detail-1">
      <td colspan="3">
        <p>联系方式：138xxxxxxxx</p>
        <p>地址：北京市海淀区</p>
      </td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td><button class="toggle-btn" data-target="detail-2">展开/折叠</button></td>
    </tr>
    <tr class="detail-row" id="detail-2">
      <td colspan="3">
        <p>联系方式：139xxxxxxxx</p>
        <p>地址：上海市浦东新区</p>
      </td>
    </tr>
  </tbody>
</table>

<style>
  .detail-row {
    display: none; /* 初始隐藏 */
  }
  .detail-row.show {
    display: table-row; /* 显示 */
  }
</style>

<script>
  const toggleButtons = document.querySelectorAll('.toggle-btn');

  toggleButtons.forEach(button => {
    button.addEventListener('click', () => {
      const targetId = button.dataset.target;
      const detailRow = document.getElementById(targetId);
      detailRow.classList.toggle('show');
    });
  });
</script>

优点： 灵活，可以自定义各种动画效果，兼容性好。

缺点： 需要编写JavaScript代码。

使用JavaScript库或框架：

如果你的项目已经使用了jQuery、React、Vue等库或框架，那么可以利用它们提供的功能来简化折叠展开的实现。例如，jQuery可以使用slideToggle()方法，React和Vue可以使用条件渲染。

jQuery示例：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>30</td>
      <td><button class="toggle-btn" data-target="#detail-1">展开/折叠</button></td>
    </tr>
    <tr class="detail-row" id="detail-1">
      <td colspan="3">
        <p>联系方式：138xxxxxxxx</p>
        <p>地址：北京市海淀区</p>
      </td>
    </tr>
  </tbody>
</table>

<style>
  .detail-row {
    display: none;
  }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('.toggle-btn').click(function() {
      const target = $(this).data('target');
      $(target).slideToggle();
    });
  });
</script>

优点： 简化代码，利用现有库或框架的功能。

缺点： 依赖于外部库或框架。