扩展html表格高亮显示行和列，并使当前单元格具有不同的颜色

我找到了一个用鼠标悬停时高亮显示行和列的示例。

https://stackoverflow.com/a/28312853/139698

如何使鼠标悬停的一个单元格变为不同的颜色，同时保持高亮显示的行和列？

<html>
<head>
<title></title>
<style>
.hovered {
background-color: teal;
}
</style>
<script src="Scriptsjquery-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>

继续链接SO答案

您可以向组件(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的评论，这里有同样的想法，使用onClick将保持行/列的颜色，直到下一次单击。只是给出一个想法，可以使用eg功能来改进，以减少重复代码

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>

相关内容

最新更新

热门标签：