bootstrap中给表格行添加鼠标经过高亮需同时添加.table和.table-hover类，且tr必须位于tbody内；触屏设备不触发:hover，应改用:focus或点击高亮替代。
直接给 tr 加 class="table-active" 最简单
Bootstrap 本身提供了内置的行级高亮类，不需要写额外 CSS。只要在目标 tr 元素上加上 table-active 类就行，它会自动应用浅蓝背景（Bootstrap 5 默认色值是 #e9ecef）。
- 必须确保该
tr在table内部，且表格有table或table-striped等基础类，否则样式可能不生效 -
table-active是语义类，不是“选中态”，它不会影响交互逻辑，只是视觉标记 - 如果用了
table-dark主题，table-active会自动适配为深色系背景（比如#343a40），无需手动调整
想自定义颜色？覆盖 .table-active > * 的 background
Bootstrap 的高亮样式作用在 tr.table-active > *（即所有子单元格），所以直接改 tr.table-active 的 background 不生效——会被内部 td 和 th 的样式覆盖。
- 正确写法是：
.table-active > * { background-color: #ffeb3b !important; } - 注意加
!important，因为 Bootstrap 的默认样式 specificity 较高 - 如果只希望某列不被高亮，可以在对应
td或th上加bg-white覆盖
JavaScript 动态高亮某行：用 classList.toggle() 控制
点击行切换高亮、或根据数据状态自动标记，都推荐用 JS 操作 class，而不是内联 style —— 这样能复用 Bootstrap 的响应式和主题适配逻辑。
- 绑定 click 事件时，记得用
event.currentTarget，避免点到td内部元素时拿错节点 - 示例：
document.querySelectorAll('tbody tr').forEach(row => { row.addEventListener('click', () => row.classList.toggle('table-active')); }); - 如果表格启用了
table-hover，鼠标悬停会干扰点击态，建议移除该类或用 CSS 屏蔽：.table-hover tbody tr:hover { background-color: transparent !important; }
为什么 tr:hover 有时不生效？检查是否被 table-hover 或 z-index 干扰
手动写 tr:hover { background: yellow; } 很容易失效，常见原因有两个：一是 Bootstrap 的 table-hover 类已声明了更具体的 tbody tr:hover > * 规则；二是某些组件（如 DataTables）会给 tr 加 position: relative 和伪元素遮罩。
- 优先用
table-hover提供的机制，它兼容所有主题和变体 - 若必须自定义 hover，务必提高选择器 specificity，例如：
.my-table tbody tr:hover > * { background-color: #f8f9fa !important; } - 检查浏览器开发者工具里，hover 样式是否被其他规则“划掉”，而不是单纯没写对
实际项目里最常漏掉的是：忘了给 table 加基础类，或者在动态渲染后没重新绑定事件。高亮逻辑越简单越好，别绕开 table-active 自己造轮子。
