当前位置：首页 > 文章列表 > 文章 > 前端 > HTML表格折叠展开实现方法详解

HTML表格折叠展开实现方法详解

2025-07-11 19:30:52 0浏览收藏

HTML表格实现数据的折叠展开是提升用户体验的关键技巧。本文深入探讨了三种常见的实现方式，助你轻松优化网页表格的展示效果。首先，介绍了**纯CSS方案**，利用`

`和`

`标签实现无JavaScript的折叠展开，简单易用但样式定制受限。其次，详细讲解了**JavaScript控制CSS类名**的方法，该方案灵活且兼容性好，但需要编写脚本。最后，讨论了**借助jQuery等库**简化代码的策略，虽然依赖外部框架，但能显著提升开发效率。此外，还分享了优化用户体验的技巧，包括添加动画效果、状态保持以及无障碍访问等，让你的表格在各种设备上都能呈现最佳效果。

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>

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

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