无法修改父表时，如何用原生JS实现嵌套内层表格行悬停高亮？

我完全懂你的麻烦——原来的代码因为事件冒泡和选择范围太宽泛，导致父级表格的行也被莫名其妙高亮了。而且你既改不了表格结构、加不了ID/类名，还不能用jQuery这类库，那咱们就用原生JS精准搞定内层表格的行高亮问题。

问题出在哪？ #

原来的代码给所有<td>都绑了事件，而且没处理事件冒泡：当你鼠标移到内层表格的单元格时，事件会向上“冒泡”到外层表格的<td>，触发外层行的高亮逻辑。另外，代码也没区分开外层和内层表格，导致目标范围出错。

解决方案代码 #

// 精准定位所有内层表格：直接嵌套在<td>里的表格
var innerTables = document.querySelectorAll('td > table');

// 遍历每一个内层表格
innerTables.forEach(function(table) {
  // 获取当前内层表格里的所有行
  var rows = table.getElementsByTagName('tr');
  
  // 给每行绑定悬停事件
  for(var i = 0; i < rows.length; i++) {
    // 鼠标移入时高亮整行
    rows[i].addEventListener('mouseover', function() {
      var cells = this.getElementsByTagName('td');
      for(var j = 0; j < cells.length; j++) {
        cells[j].style.backgroundColor = 'green';
      }
      // 可选：阻止事件冒泡，避免影响更外层元素（如果有更深嵌套的话）
      // event.stopPropagation();
    });
    
    // 鼠标移出时恢复原背景
    rows[i].addEventListener('mouseout', function() {
      var cells = this.getElementsByTagName('td');
      for(var j = 0; j < cells.length; j++) {
        cells[j].style.backgroundColor = 'initial';
      }
      // 可选：阻止事件冒泡
      // event.stopPropagation();
    });
  }
});

代码说明 #

1. 精准选中内层表格：用document.querySelectorAll('td > table')选中所有直接放在<td>里的表格，这就自动排除了最外层的表格（因为外层表格的父元素不是<td>），哪怕是2-3层嵌套的表格也能被精准命中。
2. 绑定在行上更高效：直接给内层表格的<tr>绑事件，而不是每个<td>，这样鼠标移到行内任意单元格，整行都会高亮，逻辑更合理，也减少了事件绑定的数量。
3. 避免影响父级：因为我们只给内层表格的行绑了事件，事件不会冒泡到外层表格的元素，自然不会触发父级行的高亮。如果你的嵌套层数更多，加上event.stopPropagation()可以彻底杜绝冒泡问题。

这个方案完全符合你的限制条件：不用改表格结构、不用额外库，只靠原生JS就能实现内层表格行的悬停高亮。

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