JavaScript控制行高亮需通过添加/移除highlight类实现，避免内联样式；用data-id精准选行；事件委托至tbody并判断target.closest('button')隔离操作按钮；多表时限定ID作用域或缓存当前高亮行；移动端用touchstart/end优化反馈，兼顾键盘Tab导航。
如何用 JavaScript 控制特定行的高亮状态
纯 CSS 无法“记住”哪一行该高亮，必须靠 JavaScript 主动添加/移除类。核心是给目标 tr 加一个自定义类（如 highlight），再用 CSS 定义它的背景色。
常见错误是直接写 document.getElementById('targetRow').style.backgroundColor = '...' ——这会污染内联样式，后续换主题或加动画时难维护。
- 推荐做法：提前在 CSS 中定义
tr.highlight { background-color: #e3f2fd !important; }，!important是为了压过表格框架（如 Bootstrap）自带的斑马纹或 hover 样式 - 获取目标行的方式要明确：
document.querySelector('tr[data-id="123"]')比document.getElementsByTagName('tr')[2]更可靠，尤其当表格有thead或动态增删行时 - 如果目标行由后端数据决定，建议在渲染 HTML 时就加上
class="highlight"，避免 JS 等 DOM 加载完再操作，减少闪烁
点击按钮时高亮对应行，但不干扰其他事件
当某列是操作按钮（比如“编辑”“删除”图标），用户点按钮时，你不希望整行都响应 click 高亮逻辑，否则和业务动作冲突。
关键不是阻止事件，而是精准判断点击源：
立即学习“前端免费学习笔记（深入）”；
- 监听
tbody的click事件，用e.target.closest('button.action-btn')判断是否点在按钮上；如果是，只执行业务逻辑，跳过高亮步骤 - 若点在非按钮区域（如
td文本、空白处），再执行e.target.closest('tr').classList.add('highlight') - 避免对
tr直接绑 click——它会捕获所有子元素点击，包括按钮，导致重复触发
多表格共存时避免高亮互相干扰
页面上有多个表格（比如“待办列表”和“已完成列表”），你只想让其中一个表格支持高亮，或不同表格各自独立记忆高亮行。
问题常出在全局选择器上，比如 document.querySelectorAll('tr.selected') 会把所有表格里的 selected 行都清掉。
- 给每个表格加唯一
id（如id="task-table"），高亮逻辑限定作用域：document.querySelectorAll('#task-table tr.highlight') - 更轻量的做法是把当前高亮行存在变量里：
let currentHighlightedRow = null，每次新点击前只对它调用classList.remove('highlight')，不查 DOM - 如果用 jQuery，可用事件委托绑定到具体表格：
$('#task-table').on('click', 'tbody tr', handler)，天然隔离作用域
移动端点击后高亮残留或延迟生效
iOS Safari 和部分安卓浏览器中，点击后 :active 状态常失效，且 click 事件有约 300ms 延迟，用户感觉不到即时反馈。
这不是 bug，是浏览器为双击缩放预留的判断窗口。纯靠 click 实现高亮，在移动端体验很差。
- 给
table加-webkit-tap-highlight-color: transparent去掉灰色蒙层 - 配合
touchstart立即加临时类（如tr.is-pressing），touchend后立刻移除——仅用于视觉过渡，最终状态仍由click决定 - 不要依赖
:hover做持久高亮，它在触屏设备上行为不可控；真正需要“保持高亮”的场景，必须走 JS 类控制
真正容易被忽略的是：高亮逻辑是否和键盘导航（Tab 键切换焦点）兼容。:focus-within 可以补足这部分，但不能替代 click 绑定——毕竟用户既可能点鼠标，也可能按回车键触发行操作。
