使用table-hover类与rowspan的Bootstrap表格 hover时无法高亮同组行

这个问题确实挺头疼的——Bootstrap默认的table-hover样式只会高亮鼠标直接悬停的那一行，没法识别rowspan关联的同组行，导致同一分类的行不能一起高亮。我给你两种实用的解决思路，按需选择：

方法一：JavaScript联动（通用灵活，推荐） #

这种方法不管每组有多少行，都能完美适配，步骤如下：

1. 给表格行标记分组 #

先给同一主分类的所有行加上相同的data-group属性，方便后续识别：

<table class="table table-hover" border="1">
  <tbody>
    <tr data-group="potato">
      <td rowspan="2">potato</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr data-group="potato">
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr data-group="banana">
      <td rowspan="2">banana</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr data-group="banana">
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

2. 编写JS实现联动高亮 #

用原生JavaScript监听鼠标事件，悬停时给同组所有行加上Bootstrap自带的table-active类（和默认hover样式保持一致）：

// 获取表格内所有行
const tableRows = document.querySelectorAll('table.table-hover tbody tr');

tableRows.forEach(row => {
  // 鼠标进入行时，高亮同组所有行
  row.addEventListener('mouseenter', () => {
    const groupId = row.dataset.group;
    document.querySelectorAll(`tr[data-group="${groupId}"]`).forEach(groupRow => {
      groupRow.classList.add('table-active');
    });
  });

  // 鼠标离开行时，移除同组高亮
  row.addEventListener('mouseleave', () => {
    const groupId = row.dataset.group;
    document.querySelectorAll(`tr[data-group="${groupId}"]`).forEach(groupRow => {
      groupRow.classList.remove('table-active');
    });
  });
});

如果你项目里用了jQuery，代码可以更简洁：

$('table.table-hover tbody tr').hover(
  function() {
    const groupId = $(this).data('group');
    $(`tr[data-group="${groupId}"]`).addClass('table-active');
  },
  function() {
    const groupId = $(this).data('group');
    $(`tr[data-group="${groupId}"]`).removeClass('table-active');
  }
);

方法二：纯CSS实现（仅限固定行数场景） #

如果你的表格每组行数固定（比如都是2行），可以用CSS相邻兄弟选择器快速实现，但局限性很大——行数变化就得修改代码：

/* 悬停第一行时，同时高亮第二行 */
.table-hover tbody tr:hover,
.table-hover tbody tr:hover + tr {
  background-color: #f8f9fa; /* 匹配Bootstrap默认hover背景色 */
}

/* 若每组是3行，需要追加这一行 */
/* .table-hover tbody tr:hover + tr + tr {
  background-color: #f8f9fa;
} */

这种方法适合结构完全固定的简单表格，复杂场景还是推荐JS方案。

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