点击保持选中需用JavaScript切换class：为tr添加selected类，CSS定义tr.selected td, tr.selected th背景色；用事件委托监听table点击，e.target.closest('tr')获取目标行并排除thead/tfoot；支持单击取消选中。
直接用 CSS 的 :hover 只能实现悬停高亮，点击后要保持选中状态，必须靠 JavaScript 控制类名切换——这是最稳定、可维护也兼容性最好的方式。
核心逻辑：用 class 切换代替内联样式
不要写 onclick="this.parentNode.style.backgroundColor='...'" 这类硬编码样式，它会让颜色、动画、响应式等后续调整变得困难。正确做法是：
- 给
<tr>添加或移除一个自定义类（比如selected） - 在 CSS 中统一定义
tr.selected { background-color: #e3f2fd; } - 每次点击新行前，先清掉表格里已有的
selected类，保证单选唯一
绑定事件：推荐事件委托，避免重复绑定
尤其当表格内容动态加载（比如分页、搜索刷新），直接遍历所有 tr 绑事件容易漏绑或重复。更稳妥的是监听整个表格：
- 在
<table id="myTable">上监听click - 用
e.target.closest('tr')获取被点中的行，兼容点击td内任意位置 - 过滤掉
thead或tfoot中的tr，防止误操作表头
CSS 样式：注意背景色生效范围
tr 本身不渲染背景，真正起作用的是它的子元素 td 和 th。所以建议这样写：
立即学习“前端免费学习笔记（深入）”；
tr.selected td, tr.selected th { background-color: #e3f2fd !important; }- 加
!important是为了压过斑马纹（tr:nth-child(odd)）或其他框架默认样式 - 如果用了
border-collapse: collapse，记得同步设置border-color避免边框颜色突兀
支持取消选中：点击已高亮行就取消
如果希望再点一次同一行就取消高亮，逻辑很简单：
- 点击时先判断当前行是否已有
selected类 - 有则移除，没有则先清空其他行、再给当前行添加
- 不需要额外变量记录状态，DOM 类名就是真实状态源
