无法实现嵌套可点击行表格 点击父行展开子行功能求助

核心实现逻辑 #

• 给不同层级的表格行绑定唯一ID，子行通过自定义属性关联父行ID
• 默认隐藏所有子层级行，点击父行时切换对应子行的显隐状态
• 可添加箭头标识提升交互感知

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
th {
  background-color: #f2f2f2;
}
/* 层级缩进 */
.parent-row td:first-child {
  padding-left: 16px;
}
.child-row td:first-child {
  padding-left: 32px;
}
.grandchild-row td:first-child {
  padding-left: 48px;
}
/* 可点击行样式 */
.collapsible {
  cursor: pointer;
}
/* 箭头标识 */
.arrow::before {
  content: "▶";
  display: inline-block;
  margin-right: 6px;
  transition: 0.2s;
}
.arrow.expanded::before {
  transform: rotate(90deg);
}
/* 默认隐藏子行 */
.child-row, .grandchild-row {
  display: none;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>数值</th>
    </tr>
  </thead>
  <tbody>
    <!-- 父行 -->
    <tr class="parent-row collapsible" id="parent-1">
      <td><span class="arrow"></span>父级项1</td>
      <td>100</td>
    </tr>
    <!-- 子行 -->
    <tr class="child-row collapsible" data-parent="parent-1" id="child-1-1">
      <td><span class="arrow"></span>子级项1-1</td>
      <td>50</td>
    </tr>
    <!-- 二级子行 -->
    <tr class="grandchild-row" data-parent="child-1-1">
      <td>二级子项1-1-1</td>
      <td>25</td>
    </tr>
    <tr class="grandchild-row" data-parent="child-1-1">
      <td>二级子项1-1-2</td>
      <td>25</td>
    </tr>
    <tr class="child-row" data-parent="parent-1">
      <td>子级项1-2</td>
      <td>50</td>
    </tr>
    <!-- 第二个父行 -->
    <tr class="parent-row collapsible" id="parent-2">
      <td><span class="arrow"></span>父级项2</td>
      <td>200</td>
    </tr>
    <tr class="child-row" data-parent="parent-2">
      <td>子级项2-1</td>
      <td>200</td>
    </tr>
  </tbody>
</table>
<script>
// 绑定所有可折叠行的点击事件
document.querySelectorAll('.collapsible').forEach(row => {
  row.addEventListener('click', () => {
    const rowId = row.getAttribute('id');
    // 切换箭头状态
    const arrow = row.querySelector('.arrow');
    arrow.classList.toggle('expanded');
    // 查找所有关联的子行
    const childRows = document.querySelectorAll(`tr[data-parent="${rowId}"]`);
    childRows.forEach(child => {
      // 切换子行显示状态
      child.style.display = child.style.display === 'table-row' ? 'none' : 'table-row';
      // 如果父行收起，自动收起其下所有已展开的子层级内容
      if(child.classList.contains('collapsible') && !arrow.classList.contains('expanded')) {
        const childArrow = child.querySelector('.arrow');
        childArrow.classList.remove('expanded');
        const grandchildRows = document.querySelectorAll(`tr[data-parent="${child.getAttribute('id')}"]`);
        grandchildRows.forEach(gc => gc.style.display = 'none');
      }
    });
  });
});
</script>
</body>
</html>

功能说明 #

• 点击带箭头的父行可以展开/收起直属子行，带箭头的子行可以继续展开二级子行
• 折叠父行时会自动收起其下所有已展开的子层级内容，避免展开状态混乱
• 支持无限层级扩展，只需要给新增层级的行加上对应的class和父子关联属性即可适配

内容的提问来源于stack exchange，提问作者Richi