1.纯css方案使用details和summary标签实现折叠展开，无需javascript，但兼容性较差；2.javascript通过切换类名控制显示隐藏，灵活且兼容性好，但需编写脚本；3.借助jquery等库可简化代码，但依赖外部框架。优化用户体验可通过添加动画、状态保持、无障碍支持等方式实现。复杂表格可采用递归、树形数据结构或组件化管理。移动端适配需注重响应式设计、操作简化和性能优化。
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>优点： 灵活，可以自定义各种动画效果，兼容性好。
缺点： 需要编写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>优点： 简化代码，利用现有库或框架的功能。
缺点： 依赖于外部库或框架。
如何优化表格折叠展开的用户体验？
优化用户体验，不仅仅是实现功能，还要考虑细节。
-
动画效果： 使用平滑的动画效果，例如
slideDown()和slideUp()，而不是直接显示/隐藏，可以提升用户体验。 - 状态保持： 记录用户的展开/折叠状态，下次访问页面时恢复之前的状态。可以使用localStorage或cookie来实现。
-
无障碍访问： 确保折叠展开功能对屏幕阅读器等辅助技术友好。可以使用
aria-expanded属性来指示元素的展开状态。 - 性能优化： 如果表格数据量很大，可以考虑使用虚拟滚动等技术来优化性能。避免一次性渲染所有数据。
如何处理复杂表格的折叠展开？
复杂表格可能包含多层嵌套的折叠展开。
- 递归实现： 可以使用递归的方式来处理多层嵌套的折叠展开。
- 数据结构设计： 合理设计数据结构，例如使用树形结构，可以方便地管理和控制折叠展开状态。
- 组件化： 将折叠展开功能封装成独立的组件，方便复用和维护。
折叠展开表格在移动端如何适配？
移动端屏幕空间有限，更需要考虑折叠展开的适配。
- 响应式设计： 使用CSS媒体查询，根据屏幕尺寸调整表格的布局和样式。
- 简化操作： 减少不必要的操作，例如可以使用手势滑动来展开/折叠。
- 优化性能： 移动端设备的性能相对较弱，需要更加注意性能优化。
