如何通过CSS或JS实现HTML表格选中单元格时高亮整行？

纯CSS没办法实现点击单元格后持续高亮对应行的效果，原因很简单：CSS没有能记录「点击选中」状态的伪类——:active只是按下瞬间生效，松开鼠标就消失；:focus需要给单元格加tabindex才能触发，但点击页面其他元素就会失焦，没法保持选中状态。

不过如果只是要鼠标悬停时高亮行，纯CSS完全可以做到，示例代码：

tr:hover {
  background-color: #cceeff;
}

但这显然不是你要的点击后持续高亮的效果。

要实现点击单元格后保留对应行的高亮状态，必须用JavaScript（或jQuery）来处理，核心逻辑是：

1. 给每个单元格绑定点击事件
2. 点击时先移除所有行的高亮类
3. 给当前单元格所在的行添加高亮类

原生JavaScript实现示例 #

<style>
  .highlighted-row {
    background-color: #cceeff;
  }
</style>
<table border="1">
  <tr><td>AA</td><td>BA</td></tr>
  <tr><td>AB</td><td>BB</td></tr>
</table>
<script>
  // 获取所有单元格
  const cells = document.querySelectorAll('td');
  cells.forEach(cell => {
    cell.addEventListener('click', () => {
      // 移除所有行的高亮类
      document.querySelectorAll('tr.highlighted-row').forEach(row => {
        row.classList.remove('highlighted-row');
      });
      // 给当前单元格的父行添加高亮类
      cell.parentElement.classList.add('highlighted-row');
    });
  });
</script>

jQuery实现示例 #

如果你习惯用jQuery，代码会更简洁：

<style>
  .highlighted-row {
    background-color: #cceeff;
  }
</style>
<table border="1">
  <tr><td>AA</td><td>BA</td></tr>
  <tr><td>AB</td><td>BB</td></tr>
</table>
<script>
  $('td').click(function() {
    $('tr.highlighted-row').removeClass('highlighted-row');
    $(this).closest('tr').addClass('highlighted-row');
  });
</script>

这样就能实现点击任意单元格后，其所在行保持浅蓝色高亮，再次点击其他单元格时，之前的高亮会取消，切换到新的行。

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