I found and example of highlighting a row and column on hovering with mouse.
https://stackoverflow.com/a/28312853/139698
How can I make the one cell that the mouse is hovering over to a different color, but keeping the the highlighted row and column as well?
<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>
CodePudding user response:
Continuing on the linked SO answer
You can add a class to the component (this
) itself, and apply some css for it:
$(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>
Based on OP's comment, here's the same idea, with a onClick
that will keep the rows/cols colored until the next click. Just to give an idea, can be improved using eg functions to reduce duplicate code
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>