Html 引导表与rowspan一起悬停以高亮显示单元格所属的所有行

我正在尝试实现引导表上的

table hover

类的效果，它有多个

rowspan

值。这意味着我要高亮显示同一行中的每个单元格。下面是当前

表悬停行为的一个片段：


.td{
垂直对齐：中间！重要；
文本对齐：居中；
}

日期
标题
数量
价格
价值
类别
卑鄙
2020-06-25
一些名字1
2.
30.00兹罗提
60.00兹罗提
拥有
现金
1.
20.00兹罗提
20.00兹罗提
银行账户
一些名字2
2.
40.00兹罗提
贝宝
我想出了这个解决方案：


jQuery（（）=>{
if（$（“#表格多悬停”）.长度）{
const headerValues=Array.from（$（“thead”）[0]。children[0]。children）
.map（item=>item.innerText.toLowerCase（））；
设table=[]；
const tableCells=Array.from（$（“tbody”）[0]。children）
.map（item=>item.children）
.map（item=>Array.from（item））；
for（设i=0；i{
const rowIndex=parseInt（event.currentTarget.parentElement.attributes.i.value）；
const rep=event.currentTarget.attributes.rep.value；
const rowspan=event.currentTarget.attributes.rowspan！=未定义？
parseInt（event.currentTarget.attributes.rowspan.value）：1；
for（设i=0；i{
const rowIndex=parseInt（event.currentTarget.parentElement.attributes.i.value）；
const rep=event.currentTarget.attributes.rep.value；
const rowspan=event.currentTarget.attributes.rowspan！=未定义？
parseInt（event.currentTarget.attributes.rowspan.value）：1；
for（设i=0；i
td，
th{
文本对齐：居中；
垂直对齐：中间！重要；
}
.红色背景{
背景色：红色；
}

日期
标题
数量
价格
价值
2020-06-25
一些名字1
2.
30.00兹罗提
60.00兹罗提
1.
20.00兹罗提
20.00兹罗提
一些名字2
2.
40.00兹罗提
2020-06-24
一些名字1
2.
30.00兹罗提
60.00兹罗提
1.
20.00兹罗提
20.00兹罗提
一些名字2
2.
40.00兹罗提