Javascript 如何将相关单元格悬停到jQuery？

我想知道如何使用jQuery突出显示相关表

首先，我看了这个，发现了如何突出垂直和水平

我通过各种搜索寻找一种方法，但我找不到任何类似的方法

我试着自己做，但我不知道。请帮帮我

看看这里的图片

如果选择左上角的单元格，则选择“水平”、“垂直”和“对角线”。

同时，在选定的水平、垂直和对角线的中心位置选择单元格。

$（'td'）.mouseover（函数（）{
$（this.sides（）.css（'background-color'，'#EAD575'）；
var ind=$（this.index（）；
$（'td:nth child（'+（ind+1）+'））.css（'background-color'，'#EAD575'）；
});
$（'td'）.mouseleave（函数（）{
$（this.sides（）.css（'background-color'，''）；
var ind=$（this.index（）；
$（'td:n个子（'+（ind+1）+'））.css（'background-color'，''）；
});
.tg台灯{
边界塌陷：塌陷；
边界间距：0；
}
.tg台灯td，
.tg台灯th{
背景色：#fff；
边框：1px#bbb实心；
颜色：#333；
字体系列：无衬线；
字体大小：100%；
填充：10px；
垂直对齐：顶部；
}
.tg台灯.tg偶数td{
背景色：#eee；
}
.tg台灯th{
背景色：#ddd；
颜色：#333；
字体大小：110%；
字体大小：粗体；
}
.tg台灯tr：悬停td，
.tg台灯tr.偶数：悬停td{
颜色：#222；
背景色：#FCFBE3；
}
.tg高炉{
字体大小：粗体；
}
.tg it{
字体：斜体；
}
.tg左{
文本对齐：左对齐；
}
.tg对{
文本对齐：右对齐；
}
.tg中心{
文本对齐：居中；
}

标题1
标题2
标题3
标题4
标题5
一排
一排
一排
一排
一排
第2排
第2排
第2排
第2排
第2排
第3排
第3排
第3排
第3排
第3排
第4排
第4排
第4排
第4排
第4排
第5行
第5行
第5行
第5行
第5行
第6行
第6行
第6行
第6行
第6行
第7排
第7排
第7排
第7排
第7排
第8行
第8行
第8行
第8行
第8行
第9行
第9行
第9行
第9行
第9行
请参见下文。我在源代码中记录了所有内容


//检测列数
const columns=$（“表tr:first child th”）.length；
//检测不包括标头的行数
常量行=$（“表tr”）。长度-1；
$（'td'）.mouseover（函数（）{
//当前单元格的坐标
const col=$（this.index（）+1；
常量行=$（this）.closest（'tr'）.index（）；
//同一行中的单元格
$（this.sides（）.css（'background-color'，'#EAD575'）；
//同一列中的单元格
$（'td:nth child（'+col+'））.css（'background-color'，'#EAD575'）；
//右下对角线
$c=col-1；
对于（$i=行；$i 0；$i--）{
$（'tr:eq（'+$i++'）td:eq（'+（$c++）+'））.css（'background-color'，'#EAD575'）；
}
//左下对角线
$c=col-1；
对于（$i=行；$i=0）{
$（'tr:eq（'+$i++'）td:eq（'+（$c--）+'））.css（'background-color'，'#EAD575'）；
}
}
//左上对角线
$c=col-1；
对于（$i=行；$i>=0；$i--）{
如果（$c>=0）{
$（'tr:eq（'+$i++'）td:eq（'+（$c--）+'））.css（'background-color'，'#EAD575'）；
}
}
});
$（'td'）.mouseleave（函数（）{
//重置所有单元格
$（“td”）.css（'背景色'，''）；
});
.tg台灯{
边界塌陷：塌陷；
边界间距：0；
}
.tg台灯td，
.tg台灯th{
背景色：#fff；
边框：1px#bbb实心；
颜色：#333；
字体系列：无衬线；
字体大小：100%；
填充：10px；
垂直对齐：顶部；
}
.tg台灯.tg偶数td{
背景色：#eee；
}
.tg台灯th{
背景色：#ddd；
颜色：#333；
字体大小：110%；
字体大小：粗体；
}
.tg台灯tr：悬停td，
.tg台灯tr.偶数：悬停td{
颜色：#222；
背景色：#FCFBE3；
}
.tg高炉{
字体大小：粗体；
}
.tg it{
字体：斜体；
}
.tg左{
文本对齐：左对齐；
}
.tg对{
文本对齐：右对齐；
}
.tg中心{
文本对齐：居中；
}

标题1
标题2
标题3
标题4
标题5
一排
一排
一排
一排
一排
第2排
第2排
第2排
第2排
第2排
第3排
第3排
第3排
第3排
第3排
第4排
第4排
第4排
第4排
第4排
第5行
第5行
第5行
第5行
第5行
第6行
第6行
第6行
第6行
第6行
第7排
第7排
第7排
第7排
第7排
第8行
第8行
第8行
第8行
第8行
第9行
第9行
第9行
第9行
第9行
您到底想要什么？您是否需要选择水平、垂直和对角线中心的单元格。@azad对于解释的复杂性表示抱歉。嗯……把它想象成一个宾果棋盘。如果选择中间底部，则必须高亮显示水平和垂直。但是如果选择右下角，水平、垂直、对角线都必须突出显示。谢谢你的回复，我学到了很多知识。不客气。不过，我建议使用更高版本的jQuery。版本1.8.3非常旧，不再维护。