用事件委托实现表格行高亮，即在table上监听mouseenter/mouseleave，通过e.target.closest('tr')获取目标行并添加/移除highlight类，支持动态新增行且无需重复绑定，配合css过渡动画实现流畅视觉效果。
用事件委托实现表格行高亮，核心是把点击（或鼠标移入/移出）事件绑定在 table 元素上，利用事件冒泡捕获触发事件的 tr，再动态添加/移除高亮类。这样避免给每行单独绑事件，性能好、支持动态新增行。
监听 table 的 mouseenter/mouseleave 事件
比 click 更符合“高亮”的交互直觉：鼠标悬停时高亮当前行，移开时取消。注意要过滤掉非 tr 的目标（比如 td 内部元素），推荐用 closest('tr') 安全获取行元素。
- 给
table添加mouseenter和mouseleave监听器 - 在回调中用
e.target.closest('tr')获取实际所在的行 - 存在有效
tr时，添加自定义高亮类（如highlight），移出时移除
处理动态插入的行也生效
因为事件委托绑定在父级 table 上，后续通过 JS 插入的新 tr 无需额外绑定，天然支持。只要新行是 table 的后代，悬停就会被正确捕获。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 例如用
table.insertRow().innerHTML = '...'或appendChild添加行 - 不需要重新绑定事件，也不需要遍历新行调用
addEventListener - 确保新行没有阻止事件冒泡（如
e.stopPropagation()）
CSS 配合实现视觉高亮
高亮效果靠 CSS 类控制，建议用背景色 + 过渡动画提升体验。避免直接操作 style.backgroundColor，更易维护且支持 CSS 变量和伪类。
- 定义样式：
.highlight { background-color: #e6f7ff !important; transition: background-color 0.2s; } - 使用
!important可覆盖表格原有斑马纹（:nth-child）或其他内联样式 - 如果需兼容旧浏览器，可省略
transition，不影响功能
完整示例代码
HTML 中只需一个 <table id="myTable">；JS 部分如下：
<pre class="brush:php;toolbar:false;">const table = document.getElementById('myTable');
table.addEventListener('mouseenter', e => {
const row = e.target.closest('tr');
if (row) row.classList.add('highlight');
});
table.addEventListener('mouseleave', e => {
const row = e.target.closest('tr');
if (row) row.classList.remove('highlight');
});
</pre>
<p>这段代码轻量、无依赖、兼容 IE9+，不干扰原表格结构和数据逻辑。</p>
</table>
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
