纯CSS无法实现点击持久高亮，必须用JavaScript控制class切换；tr:hover仅响应悬停，无法保存选中状态；应委托事件到tbody并缓存currentRow确保单选；移动端需处理300ms延迟和tap高亮。

纯 CSS 无法实现点击后持久高亮，必须用 JavaScript 控制 class 切换，否则点完就恢复原样。

为什么 tr:hover 不行

它只响应鼠标悬停，松开或移走就失效；用户需要的是“点了哪行，哪行就记住自己被选中”，这是状态，不是瞬时交互。浏览器不保存这个状态，CSS 也没办法跨事件周期存值。

常见错误是写一堆 :hover 还加 !important，结果测试时发现点完没反应——不是代码漏了，是根本用错了地方。

click 事件绑定在哪最稳

别给每个 单独绑，尤其表格动态渲染（比如 AJAX 加载、Vue/React 列表），推荐委托到 或表格容器上：

• 用 event.target.closest('tr') 获取被点击的行，兼容点击 内任意位置（文字、图标、空隙）
• 提前过滤掉 或 里的 ：检查 tr.parentElement.tagName !== 'TBODY'
• 避免用 this 直接指代 —— 在事件委托里 this 是委托目标（如 tbody），不是触发行

  如何保证单选且不残留旧高亮

  每次点击新行前，必须清掉已有的高亮类，否则越点越多。别用 document.querySelectorAll('tr.active') 全局查——如果页面有多个表格，会误删其他表的选中行。

  更轻量的做法是缓存当前行引用：

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载

  let currentRow = null;
  tbody.addEventListener('click', e => {
    const tr = e.target.closest('tr');
    if (!tr || tr.parentElement.tagName !== 'TBODY') return;
  
    if (currentRow) currentRow.classList.remove('active');
    tr.classList.add('active');
    currentRow = tr;
  });
  

  这样避免重复 DOM 查询，也天然限定作用域。

  移动端点击没反馈？不是 JS 错了

  iOS Safari 和部分安卓浏览器默认有约 300ms 延迟，且 :active 常不生效。这不是你代码的问题，是浏览器为双击缩放留的判断窗口。

  解决方式很轻量：

  • 给 加 style="-webkit-tap-highlight-color: transparent;"
    配合 cursor: pointer 和 user-select: none 提升响应感
    真要加按压动画，用 touchstart 临时加 is-pressing 类，touchend 立刻移除——但最终选中态仍由 click 决定

    别在 tr 上写 onclick 行内属性，也别直接改 tr.style.backgroundColor；样式和逻辑耦合后，换主题色、加过渡动画、对接暗色模式都会卡住。

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