我找到了用鼠标悬停时突出显示行和列的示例。
https://stackoverflow.com/a/28312853/139698 https://stackoverflow.com/a/28312853/139698
如何使鼠标悬停的一个单元格变为不同的颜色，但同时保留突出显示的行和列？
<html>
<head>
<title></title>
<style>
.hovered {
background-color: teal;
}
</style>
<script src="Scripts\jquery-3.6.0.min.js" type="text/javascript"></script>
</head>
<body>
<table border="1">
<tr>
<td>row1 col1</td>
<td>row1 col2</td>
<td>row1 col3</td>
</tr>
<tr>
<td>row2 col1</td>
<td>row2 col2</td>
<td>row2 col3</td>
</tr>
<tr>
<td>row3 col1</td>
<td>row3 col2</td>
<td>row3 col3</td>
</tr>
</table>
<script>
$(document).ready(function () {
$('td').hover(function () {
$(this).parent('tr').toggleClass('hovered');
$('td:eq(' + this.cellIndex + ')', 'tr').toggleClass('hovered');
});
});
</script>
</body>
</html>
继续链接所以答案 https://stackoverflow.com/a/28312853/139698
您可以向组件添加一个类（this) 本身，并为其应用一些 css：
$(this).toggleClass('hovered-cell')
.hovered-cell {
background: orange;
}
$('td').hover(function() {
$(this).toggleClass('hovered-cell')
$(this).parent('tr').toggleClass('hovered');
$('td:eq('+this.cellIndex+')','tr').toggleClass('hovered');
});
table {
border-spacing: 0px;
}
td {
border: 1px solid #bbb;
padding: 0.2em;
}
tr:first-child, td:first-child {
background: lightgrey;
}
.hovered {
background: yellow;
}
.hovered-cell {
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><td> <td>Column1<td>Column2<td>Column3<td>Column4<td>Column5
<tr><td>Row1<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row2<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row3<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
</table>
基于OP的评论 https://stackoverflow.com/questions/73788920/extend-html-table-highlight-row-and-column-and-make-current-cell-a-different-col/73788969?noredirect=1#comment130296322_73788969，这里有同样的想法，onClick这将使行/列保持颜色，直到下一次单击。只是为了提供一个想法，可以使用例如函数来改进以减少重复代码
const removePersistant = () => $('.hovered-per').removeClass("hovered-per");
$('td').hover(function() {
$(this).toggleClass('hovered-cell')
$(this).parent('tr').toggleClass('hovered');
$('td:eq('+this.cellIndex+')','tr').toggleClass('hovered');
$('.hovered-per').removeClass("highlight");
});
$('td').click(function() {
removePersistant();
$(this).toggleClass('hovered-per')
$(this).parent('tr').toggleClass('hovered-per');
$('td:eq('+this.cellIndex+')','tr').toggleClass('hovered-per');
});
table {
border-spacing: 0px;
}
td {
border: 1px solid #bbb;
padding: 0.2em;
}
tr:first-child, td:first-child {
background: lightgrey;
}
.hovered {
background: yellow;
}
.hovered-cell {
background: orange;
}
.hovered-per {
background: purple;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><td> <td>Column1<td>Column2<td>Column3<td>Column4<td>Column5
<tr><td>Row1<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row2<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row3<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
</table>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
