最稳做法是用 addEventListener 绑定到 <table> 上，通过事件委托和 class 切换实现高亮；避免给每个 <tr> 单独绑定 onclick，因其在动态增删行、性能、兼容性和内存管理上存在严重缺陷。
直接用 addEventListener 绑定到 <table> 上，配合事件委托 + class 切换，是最稳、最易维护的做法。硬写 onclick 行内属性或遍历所有 <tr> 单独绑定，后期加行、删行、动态渲染都会出问题。
为什么不能给每个 <tr> 单独绑 onclick
看似简单，实际埋雷：
- 动态插入新行时，新
<tr>没绑定事件，点击无效 - 表格数据量大（比如 200+ 行），一次性绑 200 多个监听器，浪费内存且影响初始化性能
- 如果用
document.querySelectorAll('tr').forEach(...)，但没过滤<thead>或<tfoot>里的<tr>，点表头也会触发，逻辑错乱 - 移除某行后，原绑定的事件监听器不会自动清理，存在潜在内存泄漏
event.target 怎么准确拿到被点击的 <tr>
关键不是找 <tr>，而是「向上找最近的 <tr>」。因为用户可能点的是 <td>、<span> 甚至空格，event.target 不一定是 <tr>。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
table.addEventListener('click', function (e) {
const tr = e.target.closest('tr');
if (!tr || tr.parentElement !== tbody) return; // 排除 thead/tfoot
// 后续处理...
});
-
closest('tr')比反复parentNode判断更安全、更简洁 -
tr.parentElement !== tbody是为了防止点到表头行——如果你的<tbody>有 id（比如id="data-body"），就用tr.parentElement.id !== 'data-body' - 不要用
e.target.tagName === 'TR'，太脆弱：用户点文字、图标、复选框时，target是子元素，不是<tr>
高亮样式该用 style.backgroundColor 还是 classList？
必须用 classList + CSS 类。理由很实际：
-
style.backgroundColor会覆盖掉 CSS 中定义的:hover、transition、!important规则，导致鼠标悬停失效或动画卡顿 - 主题切换、暗色模式支持全靠 CSS 类，硬编码颜色值会让后续维护成本飙升
- 多状态并存时（比如「已选中」+「禁用中」），用多个 class 组合比拼字符串颜色灵活得多
对应 CSS 示例：
tbody tr { transition: background-color 0.2s ease; }
tbody tr.selected { background-color: #d0eaff !important; }
tbody tr:hover:not(.selected) { background-color: #f5f9ff; }
JS 中只需：tr.classList.toggle('selected')，其他都交给 CSS。
单选还是多选？这个逻辑差异容易被忽略
很多需求文档只写“点击高亮”，但没说清楚是否允许多选。这直接影响 DOM 操作范围：
- 单选：每次点击前先清除所有
.selected，再给当前行加 —— 注意要排除自身，避免闪动 - 多选：只操作当前行，不碰别的 —— 但得考虑 Ctrl/Shift 点击扩展选择，这时候就得监听
event.ctrlKey和event.shiftKey - 如果表格启用了排序或分页，点击高亮状态必须和数据 ID 关联，而不是依赖 DOM 顺序，否则翻页后状态丢失
最常被漏掉的一点：没有保存「上次点击的 <tr>」引用。想实现单选又不想每次都查一遍 DOM，就该缓存一个 let lastSelectedTr = null 变量，点击时先对它 classList.remove('selected')，再更新引用。
