HTML表格中不能直接嵌套<tr>实现层级，因为浏览器会强制修正非法结构：<tr>只能作为<tbody>、<thead>或<table>的直接子元素，嵌套会导致DOM重排、父子关系丢失；必须用data-level和data-parent-id显式标记层级，并通过JS精准查询与控制显隐。
为什么不能直接在 里嵌套子
实现层级
浏览器解析 HTML 时会强制修正非法结构：<tr> 只能作为 <tbody>、<thead> 或 <table> 的直接子元素。如果你写成：
<tr data-level="1"><td>父项</td></tr>
<tr data-level="2"><td>子项</td></tr>
实际 DOM 中，第二个 <tr> 会被自动提升到同级 <tbody> 下，破坏父子关系。JS 无法靠 DOM 树自然识别“谁是谁的子行”。
常见错误现象：nextSibling 拿到的不是目标子行、折叠后空行残留、colspan 错位导致边框塌陷。
- 必须用
data-parent-id 或 data-level 显式标记层级归属，而非依赖 DOM 位置
- 子行应统一包裹在
<tbody> 或 <div role="rowgroup"> 中，避免被浏览器重排
- 不要用
visibility: hidden 控制显隐——它仍占布局空间，会导致点击区域偏移或滚动条异常
如何用 data-level + JS 精准控制第 3 级折叠
三级折叠不是“点一次展开全部”，而是逐级响应：点 level-1 行只展开所有 level-2 子行；再点某 level-2 行，才展开其下 level-3 行。关键在过滤和范围限定。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给每行加
data-level="1"、data-level="2"、data-level="3"，并确保 level-2 行带 data-parent-id="101"（对应某 level-1 行 id）
- JS 里用
document.querySelectorAll('tr[data-level="2"][data-parent-id="101"]') 精确选中子集，而不是 tr[data-level="2"] 全量操作
- 切换时只改
style.display，不操作 class —— 避免 CSS 选择器污染（比如 .folded tr 可能误匹配深层子行）
- 初始状态建议全显，JS 控制折叠逻辑；别提前写
style="display:none"，否则动态增删行时易出错
箭头图标旋转与状态同步怎么做
图标方向必须和行显隐状态严格一致，否则用户会困惑。纯 CSS transform: rotate() 最轻量，但需绑定到具体触发元素，不能靠父容器统一控制。
典型结构：
<tr data-level="1" data-id="101">
<td><span class="toggle-icon">▶</span> 区域总览</td>
<td>¥120,000</td>
</tr>
JS 中操作：
- 点击时先查当前
span.toggle-icon 的 class：含 expanded 就收起，否则展开
- 展开时设
icon.classList.add('expanded')，CSS 定义 .toggle-icon.expanded { transform: rotate(90deg); }
- 收起时调用
icon.classList.remove('expanded')，同时确保对应子行 display: none
- 不要用
innerHTML = '▼' 替换字符——会丢失事件绑定、破坏无障碍属性
用 替代自定义 JS 的边界在哪
<details> 是语义最优解，但仅适用于**单层、非表格场景**。强行塞进 <table> 会破坏解析，Safari 和旧版 Edge 直接报错。
可行折中路径：
- 放弃
<table>，改用 <div role="table"> + <div role="row"> 模拟，再嵌 <details> —— 适合报表类页面，但打印样式不可控、SEO 权重下降
- 只对最末级明细行用
<details>，上级仍用 JS 控制 —— 混合方案，兼顾语义与层级能力
- 别给
<details> 设 height 或 transition：它内部高度是动态计算的，硬加会导致抖动或截断
真正难的不是展开动作本身，而是当用户快速连点、键盘焦点切换、屏幕阅读器播报时，状态还能否保持一致。这要求每一行的 aria-expanded 和 aria-hidden 必须随 JS 同步更新，漏掉一个就等于放弃无障碍支持。
浏览器解析 HTML 时会强制修正非法结构：<tr> 只能作为 <tbody>、<thead> 或 <table> 的直接子元素。如果你写成：
<tr data-level="1"><td>父项</td></tr> <tr data-level="2"><td>子项</td></tr>
实际 DOM 中，第二个 <tr> 会被自动提升到同级 <tbody> 下，破坏父子关系。JS 无法靠 DOM 树自然识别“谁是谁的子行”。
常见错误现象：nextSibling 拿到的不是目标子行、折叠后空行残留、colspan 错位导致边框塌陷。
- 必须用
data-parent-id或data-level显式标记层级归属，而非依赖 DOM 位置 - 子行应统一包裹在
<tbody>或<div role="rowgroup">中，避免被浏览器重排 - 不要用
visibility: hidden控制显隐——它仍占布局空间，会导致点击区域偏移或滚动条异常
如何用 data-level + JS 精准控制第 3 级折叠
三级折叠不是“点一次展开全部”，而是逐级响应：点 level-1 行只展开所有 level-2 子行；再点某 level-2 行，才展开其下 level-3 行。关键在过滤和范围限定。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给每行加
data-level="1"、data-level="2"、data-level="3"，并确保 level-2 行带data-parent-id="101"（对应某 level-1 行 id） - JS 里用
document.querySelectorAll('tr[data-level="2"][data-parent-id="101"]')精确选中子集，而不是tr[data-level="2"]全量操作 - 切换时只改
style.display，不操作 class —— 避免 CSS 选择器污染（比如.folded tr可能误匹配深层子行） - 初始状态建议全显，JS 控制折叠逻辑；别提前写
style="display:none"，否则动态增删行时易出错
箭头图标旋转与状态同步怎么做
图标方向必须和行显隐状态严格一致，否则用户会困惑。纯 CSS transform: rotate() 最轻量，但需绑定到具体触发元素，不能靠父容器统一控制。
典型结构：
<tr data-level="1" data-id="101"> <td><span class="toggle-icon">▶</span> 区域总览</td> <td>¥120,000</td> </tr>
JS 中操作：
- 点击时先查当前
span.toggle-icon的 class：含expanded就收起，否则展开 - 展开时设
icon.classList.add('expanded')，CSS 定义.toggle-icon.expanded { transform: rotate(90deg); } - 收起时调用
icon.classList.remove('expanded')，同时确保对应子行display: none - 不要用
innerHTML = '▼'替换字符——会丢失事件绑定、破坏无障碍属性
用 替代自定义 JS 的边界在哪
<details> 是语义最优解，但仅适用于**单层、非表格场景**。强行塞进 <table> 会破坏解析，Safari 和旧版 Edge 直接报错。
可行折中路径：
- 放弃
<table>，改用<div role="table">+<div role="row">模拟，再嵌<details>—— 适合报表类页面，但打印样式不可控、SEO 权重下降 - 只对最末级明细行用
<details>，上级仍用 JS 控制 —— 混合方案，兼顾语义与层级能力 - 别给
<details>设height或transition：它内部高度是动态计算的，硬加会导致抖动或截断
真正难的不是展开动作本身，而是当用户快速连点、键盘焦点切换、屏幕阅读器播报时，状态还能否保持一致。这要求每一行的 aria-expanded 和 aria-hidden 必须随 JS 同步更新，漏掉一个就等于放弃无障碍支持。
