点击行后无法仅用css实现持久高亮，必须通过javascript切换selected类，再用css定义tr.selected背景色，并在每次点击前清除已有selected类以确保单选唯一性。

点击行后如何用 CSS 实现高亮变色

直接用 :hover 只能悬停生效，点击需要状态记忆。纯 CSS 无法持久记录“哪一行被点过”，所以必须引入 JavaScript 控制类名。核心思路是：给 <tr> 绑定 <code>click 事件，切换一个自定义类（比如 selected），再用 CSS 定义该类的背景色。

注意：不要用 onclick 行内属性，也不建议直接改 style.backgroundColor —— 这会让样式和逻辑耦合，后续换色或加动画会很难维护。

• 推荐给表格加 id="myTable"，方便精准绑定事件
• 监听 click 时，用 e.target.closest('tr') 获取被点击的行，兼容点击单元格内部任意位置
• CSS 中写 tr.selected { background-color: #e3f2fd !important; }，!important 是为了压过某些框架默认的斑马纹样式

如何避免多选时上一行残留高亮

如果需求是“单选”（即每次只高亮一行），就必须在设新行之前清除旧的 selected 类。否则点来点去，所有点过的行都会一直亮着。

常见错误是只加不删，或者用 querySelector('.selected') 查找时没限定范围，结果删掉了其他表格里的高亮行。

• 操作前先执行 document.querySelectorAll('#myTable tr.selected').forEach(tr => tr.classList.remove('selected'))
• 更稳妥的做法是把当前高亮行存在变量里（let currentRow = null），点击新行时只对它调用 classList.remove()，避免 DOM 查询开销
• 如果表格有表头（<thead>），记得过滤掉 <code>tr 是否属于 <tbody>，否则点表头也会触发 <h3>移动端点击反馈延迟与 <code>active 状态失效问题

  在 iOS Safari 或部分安卓浏览器中，单纯靠 click 事件会有约 300ms 延迟，且 :active 伪类常不生效，用户感觉不到即时反馈。

  

  html-to-pptx

  将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

  下载

  这不是代码写错了，而是移动端浏览器为双击缩放留的判断窗口。解决方式不是加 touchstart，而是用更轻量、更通用的办法：

  • 给 <table> 加 CSS 属性：<code>-webkit-tap-highlight-color: transparent;（去掉灰色点击蒙层）
  • 配合 cursor: pointer 和 user-select: none 提升响应感
  • 如果仍需视觉反馈，可在 touchstart 阶段临时加一个 is-pressing 类，touchend 后立刻移除 —— 但仅用于过渡动画，最终状态仍由 click 决定

  遇到 tr 里有按钮或链接时事件冒泡干扰怎么办

  当某列是操作按钮（如删除图标）或可点击链接，用户点按钮时你不希望整行高亮，否则交互逻辑错乱。

  关键不是阻止所有事件，而是区分“有意点击行”和“有意点击内部控件”。最直接的方式是在按钮/链接上加 data-no-row-select 标记，然后在事件处理器里判断：

  if (e.target.hasAttribute('data-no-row-select')) return;

  • 不要用 e.stopPropagation() —— 它会破坏按钮自身的事件绑定（比如弹确认框）
  • 也不要用 e.target.tagName === 'TD' 判断，因为用户可能点的是 span 或 i 图标
  • 更健壮的做法是向上查找最近的带 data-no-row-select 的祖先元素，再决定是否跳过
  CSS 类名冲突、移动端点击延迟、内部控件拦截——这些不是边缘情况，而是真实项目里几乎必踩的坑。别等上线后被测试同学提 bug 才发现，初始化表格交互时就该按这四条挨个核对。

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