1.纯css方案使用details和summary标签实现折叠展开，无需javascript，但兼容性较差；2.javascript通过切换类名控制显示隐藏，灵活且兼容性好，但需编写脚本；3.借助jquery等库可简化代码，但依赖外部框架。优化用户体验可通过添加动画、状态保持、无障碍支持等方式实现。复杂表格可采用递归、树形数据结构或组件化管理。移动端适配需注重响应式设计、操作简化和性能优化。
HTML表格数据的折叠展开，简单来说，就是控制表格行（<tr>）的显示与隐藏，让用户可以按需查看详细信息，避免表格过于冗长。<img src="https://img.php.cn/upload/article/001/221/864/175153945011525.png" alt="HTML表格如何实现数据的折叠展开？有哪些方式？"><p>实现表格数据折叠展开的方法有很多，主要围绕着CSS和JavaScript展开，具体选哪种，取决于你的项目需求和技术栈。</p>
<img src="https://img.php.cn/upload/article/001/221/864/175153945172787.png" alt="HTML表格如何实现数据的折叠展开？有哪些方式？"><h3>解决方案</h3>
<ol>
<li>
<p><strong>纯CSS方案（借助<code>details和summary标签）：
立即学习“前端免费学习笔记（深入）”；
这是一种比较现代且语义化的方法，不需要JavaScript。核心在于使用<details></details>和<summary></summary>标签。<summary></summary>标签的内容会始终显示，点击后会展开或折叠<details></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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2061" title="卡奥斯智能交互引擎"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680098258140.png" alt="卡奥斯智能交互引擎" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2061" title="卡奥斯智能交互引擎">卡奥斯智能交互引擎</a>
<p>聚焦工业领域的AI搜索引擎工具</p>
</div>
<a href="/ai/2061" title="卡奥斯智能交互引擎" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</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媒体查询，根据屏幕尺寸调整表格的布局和样式。
- 简化操作： 减少不必要的操作，例如可以使用手势滑动来展开/折叠。
- 优化性能： 移动端设备的性能相对较弱，需要更加注意性能优化。
