子行必须紧跟主行且同属一个，不可嵌套；正确结构为后紧接，通过data-parent-id精准关联父子关系，禁用nextSibling改用nextElementSibling。

子行必须作为独立 紧跟主行，不能嵌套

浏览器会强制修正非法 HTML 结构： 只能是 的直接子元素。写成 ... 会导致内层 被自动提升到同级，父子关系彻底丢失。JS 查找 nextSibling 会失败，折叠后常出现空行、边框塌陷、colspan 错位。

正确结构是：主行 → 紧跟一个 ，二者同属一个 。DOM 顺序决定视觉连贯性，不能靠 JS 插入到任意位置。

• colspan 值必须等于表格实际列数（如 5 列就写 colspan="5"），动态列需用 JS 计算：table.rows[0].cells.length
• 不要用 visibility: hidden —— 它仍占布局空间，鼠标点击区域偏移、滚动条异常
• 初始状态保持所有行可见，显隐逻辑全由 JS 控制；避免提前写 style="display:none"，否则增删行时状态易错乱

用 data-parent-id 而不是 DOM 位置判断父子关系

仅靠 nextElementSibling 只能处理单级“主-详情”行，无法支持多级树形（比如部门→小组→成员）。一旦中间插入筛选行、分页占位符或服务端渲染的空行，链式查找立刻断裂。

必须显式标记层级归属：，子行写 。这样 JS 可用 document.querySelectorAll('tr[data-level="2"][data-parent-id="101"]') 精准锁定目标集合，不受 DOM 顺序干扰。

• 给每行设唯一 id（如 row-123），父行用 data-children="123,456" 显式声明子集，更利于动态增删和状态同步
• 避免用 class="child-level-2" 这类命名——CSS 类易被其他逻辑覆盖，data- 属性语义清晰、不易冲突
• 折叠/展开动作应绑定在父行内带 role="button" 的可点击区域（如图标或文字旁空白区），而非整行 ，防止误触且支持键盘 Enter/Space 操作

  箭头旋转和详情切换必须同步操作

  只切 display 不动图标，或只转图标不控显隐，都会造成状态错位。用户点两次后可能发现图标朝下但内容已收起，或图标朝右但详情仍显示。

  关键在于把两个动作封装为原子操作：点击时同时调用 targetRow.classList.toggle("hidden") 和 arrowEl.classList.toggle("rotated")。CSS 中用 transform: rotate(90deg) 实现 ▶ → ▼，别用 Unicode 替换（缩放失真、对齐难）。

  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载
  • 必须用 nextElementSibling 获取目标详情行 —— nextSibling 会拿到文本节点（换行、空格），导致 classList 操作报错
  • 过渡动画不能直接作用于 （height 不生效），应在详情 内包一层
    ，对它做 max-height + overflow: hidden 动画
  • 主行 :hover 时，用相邻兄弟选择器 .expandable:hover + .detail-row 同步高亮详情区，否则鼠标移到详情行上会突然失去背景色

  第三方表格库（如 el-table）要绕过默认渲染逻辑

  像 Element Plus 的 el-table 会接管 DOM 渲染，直接操作 tr 元素容易被重置。它提供 expand-row-keys 和 row-key 属性，但要求 row-key 必须唯一且稳定（不能用索引），expand-row-keys 必须是字符串数组（如 ["101", "102"]），传数字或对象会静默失效。

  如果你手动插入 detail-row，el-table 会在下次 re-render 时清除它。正确做法是用其原生的 expand 插槽，并确保每行数据有明确的 isExpanded 字段供响应式控制。

  • 不要在 el-table 外层再套 onclick —— 事件会被内部 row-click 拦截，优先使用 @expand-change 钩子
  • 自定义折叠图标需通过 expand-slot 注入，不能硬塞进 或用 CSS 伪元素，否则 SSR 或服务端渲染时不可见
  • IE11 兼容性注意：display: table-row 可用，但若表格用了 flex 布局包裹，则需额外加 display: block 回退样式
  细节最易被忽略：所有状态切换后，建议手动触发 table.offsetHeight 强制重排，避免某些浏览器（尤其是 Safari 旧版）滚动条未及时更新、高度计算错误。这不是“可选优化”，而是折叠后页面卡住、底部内容被截断的常见原因。