表格行点击事件应使用事件委托，在table或tbody上监听，通过event.target.closest('tr')获取被点击行，兼容动态增删行；需跳过表头，优先用dataset.id标识行，避免pointer-events: none影响事件冒泡。
表格行点击事件通常不需要为每一行单独绑定监听器，利用事件冒泡可以只在表格（table）或 tbody 上监听一次，再通过事件对象的 target 判断是否点中了某一行（tr），既节省性能，又便于动态增删行时自动生效。
监听父容器，捕获冒泡上来的点击
把事件监听器加在 <table> 或 <code><tbody> 元素上，而不是每行 <code><tr>。当用户点击任意单元格或行内元素时，事件会逐层向上冒泡到该容器，此时检查 <code>event.target 的最近 <tr> 祖先即可定位被点击的行。
<ul>
<li>用 <code>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> 无需重新绑定事件——这是事件委托的核心优势。但要注意：
<ul>
<li>确保新插入的行是监听容器的后代（例如 append 到 <code>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);
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
