纯CSS无法实现点击持久高亮，必须用JavaScript控制class切换；tr:hover仅响应悬停，无法保存选中状态；应委托事件到tbody并缓存currentRow确保单选；移动端需处理300ms延迟和tap高亮。
纯 CSS 无法实现点击后持久高亮，必须用 JavaScript 控制 class 切换，否则点完就恢复原样。
为什么 tr:hover 不行
它只响应鼠标悬停，松开或移走就失效；用户需要的是“点了哪行，哪行就记住自己被选中”，这是状态，不是瞬时交互。浏览器不保存这个状态，CSS 也没办法跨事件周期存值。
常见错误是写一堆 :hover 还加 !important，结果测试时发现点完没反应——不是代码漏了，是根本用错了地方。
click 事件绑定在哪最稳
别给每个 <tr> 单独绑，尤其表格动态渲染（比如 AJAX 加载、Vue/React 列表），推荐委托到 <code><tbody> 或表格容器上：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>用 <code>event.target.closest('tr') 获取被点击的行，兼容点击 <td> 内任意位置（文字、图标、空隙）
<li>提前过滤掉 <code><thead> 或 <code><tfoot> 里的 <code><tr>：检查 <code>tr.parentElement.tagName !== 'TBODY'
this 直接指代 <tr> —— 在事件委托里 <code>this 是委托目标（如 tbody），不是触发行
如何保证单选且不残留旧高亮
每次点击新行前，必须清掉已有的高亮类，否则越点越多。别用 document.querySelectorAll('tr.active') 全局查——如果页面有多个表格，会误删其他表的选中行。
生成可在 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 常不生效。这不是你代码的问题，是浏览器为双击缩放留的判断窗口。
解决方式很轻量：
- 给
<table> 加 <code>style="-webkit-tap-highlight-color: transparent;" - 配合
cursor: pointer和user-select: none提升响应感 - 真要加按压动画，用
touchstart临时加is-pressing类，touchend立刻移除——但最终选中态仍由click决定
别在 tr 上写 onclick 行内属性，也别直接改 tr.style.backgroundColor；样式和逻辑耦合后，换主题色、加过渡动画、对接暗色模式都会卡住。
