tr背景色不生效因td/th遮挡，需设其background-color: inherit；动态行应事件委托到tbody并用e.target.closest('tr')；单选需先清除其他selected；移动端用touchstart防300ms延迟。
给 tr 绑定点击事件时，为什么背景色不生效？
直接对 tr 设置 background-color 常常无效，因为表格单元格（td、th）的背景会盖住行级背景。浏览器渲染时，td 默认有透明背景，但一旦设了边框或 padding，就容易遮挡 tr 的样式。
- 必须显式清除
td和th的背景：用background-color: inherit或transparent - 避免在
td上单独设background，否则会覆盖tr的状态 - 推荐用 CSS 类切换而非内联 style，方便复用和维护
addEventListener 怎么安全绑定到动态生成的表格行？
如果表格内容是 JS 动态插入（比如从 API 加载），直接遍历 document.querySelectorAll('tr') 并逐个绑定，可能漏掉后续新增的行。更稳妥的做法是事件委托——监听 tbody 或整个 table，再判断点击目标是否为 tr。
- 监听
tbody比监听table更精准，避开表头thead干扰 - 用
e.target.closest('tr')获取被点击的行，兼容嵌套元素（如按钮、链接在td里） - 注意排除
thead中的tr，否则点表头也会触发
document.querySelector('tbody').addEventListener('click', e => {
const row = e.target.closest('tr');
if (!row || row.parentElement.tagName !== 'TBODY') return;
row.classList.toggle('selected');
});
如何避免多选冲突并支持取消选择？
单纯用 toggle 实现单击切换选中状态没问题，但若想限制「只允许一行高亮」（即单选模式），就得先清除其他行的类名。否则用户点两行，两行都留着 selected，视觉就乱了。
- 用
document.querySelectorAll('tbody tr.selected')找出当前已选中的行，遍历移除 - 如果表格很大（>1000 行），频繁 querySelectorAll 可能卡顿；可缓存已选中的
tr引用，避免重复查找 - 注意：不要用
row.style.backgroundColor = 'xxx'，它会污染内联样式，干扰 CSS 类控制
移动端点击反馈延迟怎么解决？
在 iOS Safari 或部分安卓浏览器上，click 事件有约 300ms 延迟，导致变色响应“慢半拍”。这不是 bug，而是为双击缩放预留的判断窗口。
- 加
touchstart事件替代或补充click，立即触发样式变化 - 同时监听两者时，需用
e.preventDefault()防止 click 重复触发（尤其在touchstart后） - 别忘了加
meta viewport：没有<meta name="viewport" content="width=device-width">，touchstart可能压根不触发
td 背景继承和事件委托范围——这两处出问题，90% 的“点击没反应”或“颜色不对”都能定位到。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
