纯CSS无法实现点击后持久高亮，必须用JavaScript切换class；tr:hover仅悬停生效且无状态记忆，移动端可能不触发；应使用event.target.closest('tr')安全获取目标行，配合tbody判断、缓存当前行、清除旧高亮，并注意td背景覆盖问题。
纯 CSS 实现不了点击后持久高亮，必须用 JavaScript 切换 class；否则点完就恢复原样，或所有行都堆着高亮不清理。
为什么 tr:hover 不行
它只在鼠标悬停时生效，松开就消失；移动端甚至可能根本不触发。用户点了某行想“记住”这个选择，:hover 没状态记忆能力。浏览器规范里就没有“点击后保持样式”这回事，得靠 JS 显式控制 DOM 类名。
event.target.closest('tr') 是最稳的取行方式
用户可能点的是 td 里的文字、图标或按钮，event.target 往往不是 tr。用 closest('tr') 向上找最近的行元素，兼容嵌套结构，比 parentNode 或硬写 tr ID 安全得多。
- 别用
onclick="highlight(this)"内联写法——this 指向混乱，无法统一管理状态 - 如果表格有
<thead>，加个判断：<code>if (tr.parentElement.tagName === 'TBODY')，避免点表头也触发 - 不要给
tr直接设style.backgroundColor，后续换色、加动画、覆盖样式都会变麻烦 - 推荐写法：
document.querySelectorAll('#myTable tbody tr.selected').forEach(el => el.classList.remove('selected')) - 更高效做法：用变量缓存当前高亮行（
let currentRow = null），点击新行时只对它调classList.remove()，省掉 DOM 查询 - CSS 中定义
tr.selected { background-color: #e3f2fd; }即可，别加!important—— 除非你真被第三方框架的斑马纹样式压住了，才考虑加 - 给
<table> 加 <code>-webkit-tap-highlight-color: transparent去掉灰色蒙层 - 配合
cursor: pointer和user-select: none提升可点感 - 若需即时视觉反馈，可在
touchstart阶段临时加is-pressing类，touchend后立刻移除 —— 但最终状态仍由click决定 - 当
tr里有按钮或链接时，别阻止事件冒泡；而是用e.target.matches('button, a')判断是否点中控件，再决定是否跳过高亮逻辑
单选模式下必须先清旧再添新
常见错误是只加不删，结果越点越多行亮着。每次点击前，得主动清除已有高亮：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
移动端点击反馈延迟和误触问题
iOS Safari 和部分安卓浏览器对 click 有约 300ms 延迟，且 :active 常不生效。这不是代码错，是浏览器为双击缩放留的判断窗口。
真正容易被忽略的是：高亮类名一旦加到 tr 上，就得确保所有 td 和 th 的背景色能继承或被显式覆盖，否则你看不到效果。很多“没反应”的 case，其实是 td { background: white } 把 tr.selected 的背景盖掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
