基于CSS的多层折叠表格问题：二级折叠失效求助

数据老陈

2026-5-19

解决嵌套表格二级折叠失效问题

哈哈，这个问题我上周刚踩过坑！你遇到的二级折叠失效，核心原因就是HTML元素的ID重复了——浏览器里ID是全局唯一的标识，当你点击第二组的折叠按钮时，JS通过getElementById找元素，只会找到页面上第一个带这个ID的行，所以才会出现“收起第二组首行而非目标行”的错误。

具体解决步骤：

给每个可折叠子行生成唯一ID：
不要给所有折叠行用同一个ID（比如row-content），可以给ID加上分组标识或序号，比如第一组子行用row-content-group1-1，第二组用row-content-group2-1；如果是动态生成的表格，用循环索引拼接ID是最方便的方式。
让折叠按钮指向对应唯一ID：
每个折叠触发行的onclick事件里，要传入对应的唯一ID，确保点击时能精准找到目标行。

代码示例对比：

错误（重复ID）：

<!-- 第一组折叠行 -->
<tr onclick="toggleRow('row-content')">
  <td>点击折叠第一组</td>
</tr>
<tr id="row-content">
  <td>第一组子表格内容</td>
</tr>

<!-- 第二组折叠行 -->
<tr onclick="toggleRow('row-content')">
  <td>点击折叠第二组</td>
</tr>
<tr id="row-content">
  <td>第二组子表格内容</td>
</tr>

正确（唯一ID）：

<!-- 第一组折叠行 -->
<tr onclick="toggleRow('row-content-1')">
  <td>点击折叠第一组</td>
</tr>
<tr id="row-content-1">
  <td>第一组子表格内容</td>
</tr>

<!-- 第二组折叠行 -->
<tr onclick="toggleRow('row-content-2')">
  <td>点击折叠第二组</td>
</tr>
<tr id="row-content-2">
  <td>第二组子表格内容</td>
</tr>

JS函数无需改动（只要参数匹配ID即可）：

function toggleRow(id) {
  const targetRow = document.getElementById(id);
  targetRow.style.display = targetRow.style.display === 'none' ? '' : 'none';
}