Home Extend html table highlight row and column and make current cell a different color

Questions

Extend html table highlight row and column and make current cell a different color

September 20, 2022

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>

>Solution :

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>