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