事件冒泡是动态表格行选中功能的核心机制——只需在<table>或<tbody>上绑定一次click事件，利用event.target.closest('tr')获取被点击行，结合data-id标识、键盘修饰键（Ctrl/Cmd、Shift）实现单选、多选及连续选中，动态新增行自动生效。
JavaScript 中事件冒泡是实现动态表格行选中功能的核心机制——你不需要给每行单独绑定点击事件，只需在表格（<table>）或 tbody 上监听一次 click，利用事件从目标元素向上冒泡的特性，就能捕获任意一行的点击，并准确识别被点击的是哪一行。
利用事件冒泡监听整个表格
把 click 事件监听器加在 <tbody> 或 <table> 元素上，而不是循环给每个 <tr> 绑定。这样即使后续用 JS 动态添加新行，也不需要重新绑定事件。
- 确保表格结构清晰，每行是
<tr>，且有唯一可识别的依据（如 data-id、索引或业务 ID） - 监听时检查
event.target是否落在<tr>内，可用closest('tr')安全获取最近的行元素 - 避免误触：排除
<input>、<button>等内部可交互元素（可加条件过滤）
识别并标记被点击的行
拿到 <tr> 后，可以切换其选中状态（比如添加/移除 selected 类），同时维护一个选中行的数据标识（如 ID 列表），方便后续操作。
- 用
tr.classList.toggle('selected')实现单击切换选中 - 若需单选，先清除其他行的
selected类，再给当前行添加 - 通过
tr.dataset.id或tr.rowIndex获取唯一标识，存入数组或 Set 中
处理动态插入的新行
因为监听的是父容器，所以用 innerHTML、insertRow() 或 append() 新增的 <tr> 会自动“受管”——无需额外绑定，点击即生效。
立即学习“Java免费学习笔记（深入）”；
- 新增行时建议统一设置
data-id属性，便于状态管理 - 若使用框架或模板引擎（如 Handlebars），确保生成的 HTML 结构符合预期（
<tr>是直接子元素） - 注意：用
document.write或替换整个outerHTML会销毁事件监听器，应避免
补充：支持 Ctrl/Cmd 多选和 Shift 连续选中
在基础单击逻辑上，结合键盘状态可增强体验。例如：
- Ctrl（Windows）或 Cmd（Mac）+ 点击：追加或取消单行选中
- Shift + 点击：选中从上次点击行到当前行之间的所有行（需记录 lastClickedIndex）
- 监听
event.ctrlKey或event.shiftKey判断修饰键状态
