动态生成表格整行鼠标悬停高亮失效问题求助

嘿，这个问题我之前也踩过坑！你遇到的问题根源在于event.target的指向——当鼠标悬停在表格单元格上时，event.target对应的是触发事件的<td>元素，而不是你绑定事件的整行<tr>（也就是bRow），所以自然只有单个单元格变色了。

这里给你两种解决方案，按需选择：

方案1：修改JS事件监听逻辑 #

直接在事件处理函数里操作绑定事件的行元素（用this或者直接引用bRow），而不是event.target：

// 鼠标悬停时整行高亮
bRow.addEventListener("mouseover", function() { 
  this.style.backgroundColor = "#FDFF47"; 
});
// 鼠标离开时恢复背景色
bRow.addEventListener("mouseout", function() { 
  this.style.backgroundColor = "white"; 
});

这里的this在事件处理函数中会指向绑定事件的bRow（表格行），所以修改的是整行的背景色，就能实现你想要的效果了。

方案2：用CSS实现（更推荐） #

其实这种样式交互完全可以用CSS来完成，比JS更简洁高效，还能避免DOM操作的开销：

/* 鼠标悬停时整行变色 */
tr:hover {
  background-color: #FDFF47;
}
/* 默认行背景色 */
tr {
  background-color: white;
  /* 可选：添加过渡动画，让颜色变化更丝滑 */
  transition: background-color 0.2s ease;
}

用CSS的:hover伪类，浏览器会自动处理鼠标悬停和离开的状态，不需要写任何JS事件监听，代码更干净，维护起来也更方便。如果你的表格行有特殊类名，只需要把tr换成对应的类选择器就行，比如.table-row:hover。

内容的提问来源于stack exchange，提问作者Himanshu