必须用 javascript 控制类名实现持久行高亮，因 css 的 :hover 和 :active 仅瞬时生效且不记录状态；js 需绑定事件委托、清旧加新、过滤表头与操作元素，并处理移动端延迟及样式覆盖问题。
点击行高亮必须用 JavaScript 控制类名，纯 CSS 无法持久记录“哪一行被点过”。tr:hover 只管悬停，:active 只管按下瞬间，都不等于“已选中”。
为什么不能只靠 CSS 实现持久高亮
:hover 依赖鼠标位置，离开就失效；:active 仅在按住时生效，松开即恢复。两者都不改变 DOM 状态，浏览器也不会记住“这一行被点过”。如果你看到某段 CSS 像是实现了点击高亮，大概率是框架（比如 Vue 的 v-model）或 JS 已在背后悄悄切换了类名。
常见误判场景：
- 写了
tr.selected { background: #e3f2fd; }却没配 JS 切换类名 → 样式永远不生效 - 用
onclick="this.parentNode.classList.add('selected')"行内写法 → 后续加动画、换主题、清状态都得改 HTML，难维护 - 没过滤
<thead> 里的 <code>tr→ 点表头也触发高亮，逻辑错乱怎么用 JS 绑定点击并确保单选唯一
核心动作就三步：监听点击 → 找到目标行 → 清旧加新。推荐绑定在
<table> 上，用事件委托避免动态增删行后漏绑。 <p>关键代码逻辑：</p> <ul> <li>用 <code>e.target.closest('tr')获取被点击的行，兼容点在td内任意位置 - 先执行
document.querySelectorAll('#myTable tr.selected').forEach(tr => tr.classList.remove('selected'))清掉旧高亮 - 再给目标
tr加selected类 —— 不要用style.backgroundColor直接写内联样式 - 加判断：
if (tr.parentElement.tagName === 'TBODY')，跳过<thead> 和 <code><tfoot> <h3>移动端点击延迟与视觉反馈怎么处理</h3> <p>iOS Safari 和部分安卓 WebView 对 <code>click有约 300ms 延迟，且:active常静默失效，用户会感觉“点了没反应”。轻量级解法：
- 给
<table> 加 CSS：<code>-webkit-tap-highlight-color: transparent;去掉灰色蒙层 - 配合
cursor: pointer和user-select: none提升可点感知 - 如需即时视觉反馈，可在
touchstart阶段临时加is-pressing类，touchend立刻移除 —— 但最终高亮状态仍由click决定 - 别用
touchstart替代click来设selected，否则可能误触（比如滑动表格时触发） - 在事件处理器开头加判断：
if (e.target.matches('button, a, .action')) return; - 或者更精确地：
if (e.target.closest('.no-row-select')) return;，给那些不该触发高亮的元素加个no-row-select类 - 不要靠阻止冒泡（
e.stopPropagation()）来解决 —— 容易影响按钮自身的 click 逻辑 - 如果按钮本身需要点击反馈，单独用
button:active配transition做瞬时变色，和行高亮逻辑彻底隔离
表格里有按钮或链接时怎么避免干扰
当某列含
<button></button>或<a href></a>，用户点操作控件时你不希望整行高亮——这会让交互意图模糊。稳妥做法：
最易被忽略的点：高亮样式被框架默认斑马纹覆盖。务必在 CSS 中给
tr.selected td, tr.selected th显式设背景，并加!important（除非你确定 CSS 优先级足够高）。 - 给
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
