鍍金池/ 問答/HTML/ 使用表格 rowspan 后如何對(duì)行進(jìn)行分組？？

使用表格 rowspan 后如何對(duì)行進(jìn)行分組？？

clipboard.png

clipboard.png

clipboard.png

由第一、二張圖可以知道，我一條記錄使用了兩行進(jìn)行展示（通過 rowspan），而對(duì)使用者而言，我們認(rèn)為的兩行在他們眼中實(shí)際是一行！

碰到的坑：

我給 tr 加了懸浮效果，我鼠標(biāo)移動(dòng)上去的時(shí)候就如圖2展示的那樣，一條記錄被分成了兩行??！

有什么辦法解決嗎？？

回答
編輯回答
舊言

你的代碼帶class=tr的是上面的吧 你加個(gè)判斷，如果鼠標(biāo)在class=tr上，下面的也加懸停效果，否則上面的加懸停效果

2018年1月17日 18:41
編輯回答
純妹

使用js通過鼠標(biāo)事件給相關(guān)的兩行添加或者移除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') // 給相關(guān)的兩行添加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)
})
2018年8月19日 22:45
編輯回答
青檸

應(yīng)該有兩種方案吧。
1是用js加減class方案代替hover
2是更改dom結(jié)構(gòu)。一行是一個(gè)table或者是其他的。就是每行保證和表頭沖齊?？雌饋怼？雌饋硐袷且粋€(gè)表格。但實(shí)際不是表格。
第一種對(duì)現(xiàn)有結(jié)構(gòu)更好改一點(diǎn)

2017年1月3日 03:10