最简方案是直接给<tr>加onclick或CSS :hover，但实际需解决状态持久化、跨元素联动、动态展开及老浏览器兼容等问题。
直接给 <tr> 加 onclick 或 CSS :hover 是最简方案，但实际项目中往往需要状态持久化、跨元素联动、动态展开或兼容老浏览器——这些才是真正在现场卡住人的地方。
点击行高亮且保持选中状态（非 hover）
单纯用 :hover 只能悬停生效，无法“记住”哪一行被点过。关键是要用 JavaScript 切换 class，而非依赖伪类。
- 给每行
<tr>绑定事件时，先清除所有已有的active类，再给当前行加 —— 避免多行同时高亮 - 不要用
id选择器定位目标行（HTML 中 id 重复即失效），改用event.target.closest('tr')安全获取触发行 - CSS 中定义
tr.active { background: #e6f7ff; }，别用!important，否则后续样式难覆盖 - 若表格含
<thead>，记得在事件委托里过滤掉：if (tr.tagName === 'TR' && !tr.parentElement.matches('thead')) { ... }
点击某行，切换另一个独立 DOM 元素的样式
比如点订单行，高亮右侧对应的物流状态卡片。这不是“本行变色”，而是跨区域状态映射，靠硬编码 ID 会崩。
- 用
data-id建立关联：表格行写<tr data-id="order-123">，状态卡片写<div id="status-order-123"> - 事件处理中取
event.target.closest('tr').dataset.id，拼出目标元素 ID 后用document.getElementById()操作 - 避免用
querySelector('[id^="status-"]')全局扫描，性能差且易误匹配 - 如果状态卡片是动态生成的，优先用
document.querySelector(`[data-order-id="${orderId}"]`)，比 ID 更可控
点击箭头图标展开/收起详情行（不破坏表格结构）
很多人用 display: none 隐藏详情行，结果表格错位、边框断裂——这是 display 层级错误。
立即学习“前端免费学习笔记（深入）”；
- 详情行必须设为
display: table-row，而不是none；切换时用classList.toggle('hidden')控制，CSS 写.hidden { display: table-row !important; }不行，得写.hidden { display: none; }，但主样式里tr默认就是table-row - 箭头图标建议用 Unicode 字符（▶ / ▼）而非图片，减少请求，旋转用
transform: rotate(90deg)，别用字体图标 fallback 复杂逻辑 - 定位详情行必须严格按 DOM 顺序：箭头在
<td>里 → 找到父<tr>→nextElementSibling→ 确保它是<tr>且有特定 class（如detail-row），防止误操作页脚或分隔行 - IE9+ 支持
display: table-row，但 IE8 不支持 transform，如需兼容，改用 class 切换不同 Unicode 字符，放弃动画
移动端点击反馈延迟与穿透问题
在 iOS Safari 或安卓 Chrome 上，<tr> 点击常有 300ms 延迟，甚至点不到——因为默认不认为表格行是可点击区域。
- 给
<tr>加style="cursor: pointer"和-webkit-tap-highlight-color: transparent，让系统识别为交互元素 - 确保父级
<table>没设pointer-events: none，这个属性会静默吞掉所有子元素事件 - 如果行内含链接或按钮，点击可能穿透到下层行，解决方法是在事件处理器开头加
event.stopPropagation() - 不用
ontouchstart替代onclick，现代浏览器已优化 click 延迟，额外绑定反而增加维护成本
真正麻烦的从来不是“怎么加点击”，而是状态如何隔离、DOM 关系怎么稳建、边界情况是否覆盖。比如带分页的表格，新加载的行没绑定事件；或者合并单元格（rowspan）导致 closest('tr') 失效——这些细节不写进代码注释，下次维护的人就得重读整个表格结构。
