HTML表格如何实现数据的折叠展开？有哪些方式？-html教程-PHP中文网

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

幻夢星雲

发布： 2025-07-03 18:44:01

原创

432人浏览过

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

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

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

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

解决方案

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

立即学习“前端免费学习笔记（深入）”；

这是一种比较现代且语义化的方法，不需要JavaScript。核心在于使用<details>和<summary>标签。<summary>标签的内容会始终显示，点击后会展开或折叠<details>标签内的内容。

<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>

登录后复制

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

Zapier Agents

Zapier推出的Agents智能体，集成7000+应用程序

查看详情

缺点： 需要编写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>

登录后复制

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

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