表格行点击事件应使用事件委托，在table或tbody上监听，通过event.target.closest('tr')获取被点击行，兼容动态增删行；需跳过表头，优先用dataset.id标识行，避免pointer-events: none影响事件冒泡。
表格行点击事件通常不需要为每一行单独绑定监听器，利用事件冒泡可以只在表格（table）或 tbody 上监听一次，再通过事件对象的 target 判断是否点中了某一行（tr），既节省性能，又便于动态增删行时自动生效。
监听父容器，捕获冒泡上来的点击
把事件监听器加在 <table> 或 <tbody> 元素上，而不是每行 <tr>。当用户点击任意单元格或行内元素时，事件会逐层向上冒泡到该容器，此时检查 event.target 的最近 <tr> 祖先即可定位被点击的行。
- 用
event.target.closest('tr')获取最靠近的行元素，兼容性好且简洁 - 确保目标行属于当前表格（避免误触发嵌套表格里的行）
- 可配合
event.stopPropagation()在特定子元素（如操作按钮）上阻止冒泡，防止干扰行级逻辑
提取行数据与索引
拿到 tr 元素后，可通过多种方式获取业务信息：
-
tr.rowIndex：返回该行在table.rows中的索引（含thead行，需注意） -
Array.from(table.tBodies[0].rows).indexOf(tr)：精确获取 tbody 内的视觉序号 - 从
tr.dataset.id或自定义属性读取唯一标识，推荐用于前后端交互 - 遍历
tr.cells提取各列文本或输入值，适合表格编辑场景
处理动态内容与委托细节
新增的 <tr> 无需重新绑定事件——这是事件委托的核心优势。但要注意：
立即学习“Java免费学习笔记（深入）”；
- 确保新插入的行是监听容器的后代（例如 append 到
tbody，而非直接 document.body） - 如果行内有可聚焦元素（如
input、button），点击它们时event.target是该元素，不是tr，closest('tr')依然有效 - 避免在
tr上设置pointer-events: none或覆盖样式，否则可能中断事件路径
简单示例代码
const table = document.querySelector('#myTable');
table.addEventListener('click', (e) => {
const tr = e.target.closest('tr');
if (!tr || tr === table.querySelector('thead tr')) return; // 跳过表头
console.log('点击了第', Array.from(table.tBodies[0].rows).indexOf(tr), '行');
console.log('数据ID：', tr.dataset.id);
});
