事件委托实现树形表格展开的核心是将点击监听绑定在父容器，通过target识别.toggle-btn并依据data-id与data-parent-id动态切换子行显隐；需用closest()安全获取元素、预建childrenmap提升性能、配合css类实现过渡动画，并支持键盘操作与状态持久化。
用事件委托实现树形表格的展开，核心是把点击事件监听绑定在父容器（如 table 或 tbody），而不是每个可展开的行，再通过事件对象的 target 判断是否点中了展开按钮，并根据其数据关系动态切换子节点的显隐状态。
结构准备：带层级标识的 HTML 表格
树形表格通常靠 data-level、data-parent-id 或 data-id 等自定义属性表达父子关系。例如：
| 文件夹 A |
| 文件夹 B |
关键点：
- 每个可展开行（父节点）包含一个 .toggle-btn
- 子行通过 data-parent-id 关联父级 data-id
- 子行初始用 style="display:none" 隐藏，或统一加 collapsed 类控制
事件委托绑定与目标识别
监听表格主体，检查点击目标是否为展开按钮：
document.getElementById('treeTable').addEventListener('click', function (e) {
const btn = e.target.closest('.toggle-btn');
if (!btn) return;
<p>const row = btn.closest('tr');
const parentId = row.dataset.id;</p><p>// 找出所有直接子行：level 比当前高 1，且 parent-id 匹配
const childRows = Array.from(this.querySelectorAll('tr')).filter(tr =>
tr.dataset.level == (parseInt(row.dataset.level) + 1) &&
tr.dataset.parentId === parentId
);</p><p>// 切换子行显隐，并更新按钮图标
const isExpanded = childRows.some(tr => getComputedStyle(tr).display !== 'none');
childRows.forEach(tr => {
tr.style.display = isExpanded ? 'none' : '';
});
btn.textContent = isExpanded ? '▶' : '▼';
});</p>
说明：
- 用 e.target.closest() 安全获取按钮和所在行，兼容点击文字或内边距
- 不依赖 DOM 位置（如 nextElementSibling），而是靠数据属性匹配，更健壮
- 图标切换可换成 class 控制（如 btn.classList.toggle('expanded')），便于 CSS 管理
支持多层嵌套与性能优化
若树有多级（比如 level 0 → 1 → 2 → 3），上面逻辑默认只展开**直接子级**。如需递归展开/收起整棵子树，可改用以下查找方式：
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
- 先收集所有后代行：
tr.dataset.parentId === parentId的行，再对每个匹配行递归找它的子行 - 更高效的做法：预建索引映射，如
const childrenMap = { '1': ['2','5','7'], '2': ['3','4'] }，初始化时扫描一次表格生成，后续 O(1) 查找 - 避免重复遍历：给已展开的行加
data-expanded="true"，收起时只处理标记过的子树
示例索引构建：
const childrenMap = {};
document.querySelectorAll('#treeTable tr').forEach(tr => {
const id = tr.dataset.id;
const pid = tr.dataset.parentId;
if (pid && id) {
if (!childrenMap[pid]) childrenMap[pid] = [];
childrenMap[pid].push(id);
}
});
// 后续展开时：expandAll(childrenMap, parentId);
CSS 配合与交互提示
仅靠 JS 切换 display 可能导致无过渡动画。建议用 CSS 类配合：
.tree-row { transition: all 0.2s ease; }
.tree-row.collapsed { opacity: 0; height: 0; padding: 0; border: none; }
/* 或使用 max-height 过渡（需预设高度） */
JS 中改为：
childRows.forEach(tr => {
tr.classList.toggle('collapsed');
});
额外提示：
- 点击空白区域不触发，确保只有按钮响应
- 键盘用户支持：给按钮加 tabindex="0"，监听 Enter 或 Space
- 展开状态可持久化：用 localStorage 记录已展开的 id 列表，刷新后恢复
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
