Javascript 当鼠标悬停在上方时，如何以某种方式突出显示表格单元格

我需要突出显示带有“J”标记的表格单元格，如下所示：

在这张图片中，我将鼠标悬停在一个单元格（有黑色边框的单元格）上，它周围的某些单元格会改变颜色。如何做到这一点？我只能更改单个单元格、行或列

td{
填充：8px；
背景色：#fff；
字体大小：粗体；
}
tr：悬停{
颜色：#fff；
背景色：#000；
}
tr：悬停td{
背景色：透明；
}

0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0

桌子{
边界塌陷：塌陷；
边框：1px实心#000；
}
表td{
边框：1px实心#000；
}
运输署{
文本对齐：居中；
字号：0；
宽度：30px；
高度：30px；
背景色：#fff；
字体大小：粗体；
}
悬停{
颜色：#fff；
背景色：#000；
}
/*tr：悬停td{
背景色：透明；
} */
悬停{
颜色：#fff；
背景色：#000；
}
运输中心{
颜色：#fff；
背景色：#fff；
外形：2倍红色固体；
}
$（文档）.ready（函数（）{
var高度=5；
var宽度=5；
$（'td'）。悬停（函数（）{
var self=$（这是）；
var table=self.parent（）.parent（）；
var column=self.index（）；
var row=self.parent（）.index（）；
var current=table.find（`tr:eq（${row}）td:eq（${column}）`）
当前.toggleClass（'center'））
如果（列>0）{
varbefore=table.find（`tr:eq（${row}）td:eq（${column-1}）`）
before.toggleClass（'hover'）；
}
如果（行<高度-1）{
var bottom=table.find（`tr:eq（${row+1}）td:eq（${column}）`）
toggleClass（'hover'）；
}
如果（列<宽度-1）{
var next=table.find（`tr:eq（${row}）td:eq（${column+1}）`）
接下来是toggleClass（'hover'）；
}
如果（行>0和列<宽度-1）{
var nextUp=table.find（`tr:eq（${row-1}）td:eq（${column+1}）`）
toggleClass（'hover'）；
}
});
});
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0

我建议使用jQuery来链接每个

td:hover

上的事件的解决方案。通过使用

each

、

hover

、

Math.floor

和

toggleClass

，您可以轻松实现您想要做的事情

$（函数（）{
$（“#我的表td”）。每个（函数（索引，元素）{
$（“#”+elem.id）.hover（函数（）{
行索引=数学层（（元素id-1）/5）；
col_指数=（elem.id-1）%5；
右单元格=列索引+1；
top_cell_index=parseInt（elem.id）-4；
左单元格=列索引-1；
底部单元格索引=parseInt（元素id）+5；
if（left_cell_col>=0）$（“#”+（elem.id-1））.toggleClass（“有色”）；
如果（右单元格0）$（“#”+顶部单元格索引）。切换类别（“有色”）；
$（“#”+（parseInt（elem.id）+1））.toggleClass（“有色”）；
}
如果（底部单元格索引<26）$（“#”+底部单元格索引）。切换类别（“有色”）；
});
});
});
td{
宽度：10px；
高度：10px；
边框：1px实心#ddd；
填充：8px；
背景色：#fff；
字体大小：粗体；
}
td:悬停{
边框颜色：黑色；
字体大小：粗体；
}
.有色人种{
背景色：红色；
}
我的解决方案使用jquery数据表。其思想是，您只需要从中获取所选单元格的行数和列数，并推断出剩余的单元格


var table1=$（'#dataTable1'）。DataTable({
});
$（'#dataTable1 tbody'）。on（'mouseenter'，'td'，function（）{
var colIdx=table1.cell（this.index（）.column）；
var rowIdx=table1.cell（this.index（）.row；
$（table1.cells（）.nodes（））.removeClass（'highlight'）；
$（table1.cells（）.nodes（））.removeClass（'redtable'）；
$（table1.cell（this.node（））.addClass（'redtable'）；
$（table1.cell（rowIdx-2，colIdx.node（））.addClass（'highlight'）；
$（table1.cell（rowIdx+2，colIdx.node（））.addClass（'highlight'）；
$（table1.cell（rowIdx，colIdx+1.node（））.addClass（'highlight'）；
$（table1.cell（rowIdx，colIdx-1）.node（））.addClass（'highlight'）；
} );
.redtable{
背景色：红色！重要；
}
高光{
背景色：绿色！重要；
}

Họ vátên
身份证件
吴义新
Thờ吉安·哈姆
陈述
SĐT
胃肠道ớ我是蒂恩
Họ vátên
身份证件
吴义新
Thờ吉安·哈姆
陈述
SĐT
胃肠道ớ我是蒂恩
嗜铬细胞质
13548465