最稳做法是用 addeventlistener 绑定到 上，通过事件委托和 class 切换实现高亮；避免给每个 单独绑定 onclick，因其在动态增删行、性能、兼容性和内存管理上存在严重缺陷。

直接用 addEventListener 绑定到 <table> 上，配合事件委托 + class 切换，是最稳、最易维护的做法。硬写 <code>onclick 行内属性或遍历所有 <tr> 单独绑定，后期加行、删行、动态渲染都会出问题。 <h3>为什么不能给每个 <code><tr> 单独绑 <code>onclick

看似简单，实际埋雷：

• 动态插入新行时，新 <tr> 没绑定事件，点击无效 <li>表格数据量大（比如 200+ 行），一次性绑 200 多个监听器，浪费内存且影响初始化性能</li> <li>如果用 <code>document.querySelectorAll('tr').forEach(...)，但没过滤 <thead> 或 <code><tfoot> 里的 <code><tr>，点表头也会触发，逻辑错乱 <li>移除某行后，原绑定的事件监听器不会自动清理，存在潜在内存泄漏</li> <h3> <code>event.target 怎么准确拿到被点击的 <tr><p>关键不是找 <code><tr>，而是「向上找最近的 <code><tr>」。因为用户可能点的是 <code><td>、<code><span></span> 甚至空格，event.target 不一定是 <tr>。 <p>推荐写法：</p> <pre class="brush:php;toolbar:false;">table.addEventListener('click', function (e) { const tr = e.target.closest('tr'); if (!tr || tr.parentElement !== tbody) return; // 排除 thead/tfoot // 后续处理... });</pre> <ul> <li> <code>closest('tr') 比反复 parentNode 判断更安全、更简洁
• tr.parentElement !== tbody 是为了防止点到表头行——如果你的 <tbody> 有 id（比如 <code>id="data-body"），就用 tr.parentElement.id !== 'data-body'
• 不要用 e.target.tagName === 'TR'，太脆弱：用户点文字、图标、复选框时，target 是子元素，不是 <tr> <h3>高亮样式该用 <code>style.backgroundColor 还是 classList？

  必须用 classList + CSS 类。理由很实际：

  • style.backgroundColor 会覆盖掉 CSS 中定义的 :hover、transition、!important 规则，导致鼠标悬停失效或动画卡顿
  • 主题切换、暗色模式支持全靠 CSS 类，硬编码颜色值会让后续维护成本飙升
  • 多状态并存时（比如「已选中」+「禁用中」），用多个 class 组合比拼字符串颜色灵活得多

  对应 CSS 示例：

  

  html-to-pptx-converter

  使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

  下载

  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，就该缓存一个 <code>let lastSelectedTr = null 变量，点击时先对它 classList.remove('selected')，再更新引用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！