使用表格 rowspan 后如何对行进行分组？？

Question

由第一、二张图可以知道，我一条记录使用了两行进行展示（通过 rowspan），而对使用者而言，我们认为的两行在他们眼中实际是一行！

碰到的坑：

我给 tr 加了悬浮效果，我鼠标移动上去的时候就如图2展示的那样，一条记录被分成了两行！！

有什么办法解决吗？？

Answer 1

你的代码带class=tr的是上面的吧 你加个判断，如果鼠标在class=tr上，下面的也加悬停效果，否则上面的加悬停效果

Answer 2

应该有两种方案吧。
1是用js加减class方案代替hover
2是更改dom结构。一行是一个table或者是其他的。就是每行保证和表头冲齐。看起来。看起来像是一个表格。但实际不是表格。
第一种对现有结构更好改一点

Answer 3

使用js通过鼠标事件给相关的两行添加或者移除class：

css

.active {
    background: red;
}

js

let trs = document.querySelectorAll('tbody tr')
let curIndex = -1
trs.forEach(tr => {
  tr.addEventListener('mouseover', function(event) {
    let index = Array.prototype.indexOf.call(trs, event.currentTarget)
    if (index !== -1) {
      let half = Math.floor(index / 2)
      if (curIndex !== -1) {
        trs[curIndex * 2].classList.remove('active') // 移除上次高亮的两行
        trs[curIndex * 2 + 1].classList.remove('active')
      }
      trs[half * 2].classList.add('active') // 给相关的两行添加class
      trs[half * 2 + 1].classList.add('active')
      curIndex = half
    } else {
      curIndex = -1
    }
  }, false)

  tr.addEventListener('mouseout', function(event) {
    if (curIndex !== -1) { // 移除上次高亮的两行
      trs[curIndex * 2].classList.remove('active')
      trs[curIndex * 2 + 1].classList.remove('active')
      curIndex = -1
    }
  }, false)
})