JSFiddle - React, Tailwind, and code Playground

jquery highlight table row and column mouseover

by jQuery DotNet

HTML

<h3><a href="http://lesson8.blogspot.com">jQuery highlight table row and column mouseover</a></h3>
<table class="tg-table-light">
    <tr>
        <th>Title 1</th>
        <th>Title 2</th>
        <th>Title 3</th>
        <th>Title 4</th>
        <th>Title 5</th>
    </tr>
    <tr class="tg-even">
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
    </tr>
    <tr class="tg-even">
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
    </tr>
    <tr>
        <td>Row 4</td>
        <td>Row 4</td>
        <td>Row 4</td>
        <td>Row 4</td>
        <td>Row 4</td>
    </tr>
    <tr class="tg-even">
        <td>Row 5</td>
        <td>Row 5</td>
        <td>Row 5</td>
        <td>Row 5</td>
        <td>Row 5</td>
    </tr>
    <tr>
        <td>Row 6</td>
        <td>Row 6</td>
        <td>Row 6</td>
        <td>Row 6</td>
        <td>Row 6</td>
    </tr>
    <tr class="tg-even">
        <td>Row 7</td>
        <td>Row 7</td>
        <td>Row 7</td>
        <td>Row 7</td>
        <td>Row 7</td>
    </tr>
    <tr>
        <td>Row 8</td>
        <td>Row 8</td>
        <td>Row 8</td>
        <td>Row 8</td>
        <td>Row 8</td>
    </tr>
    <tr class="tg-even">
        <td>Row 9</td>
        <td>Row 9</td>
        <td>Row 9</td>
        <td>Row 9</td>
        <td>Row 9</td>
    </tr>
</table>

CSS

.tg-table-light {
    border-collapse: collapse;
    border-spacing: 0;
}
.tg-table-light td, .tg-table-light th {
    background-color: #fff;
    border: 1px #bbb solid;
    color: #333;
    font-family: sans-serif;
    font-size: 100%;
    padding: 10px;
    vertical-align: top;
}
.tg-table-light .tg-even td {
    background-color: #eee;
}
.tg-table-light th {
    background-color: #ddd;
    color: #333;
    font-size: 110%;
    font-weight: bold;
}
.tg-table-light tr:hover td, .tg-table-light tr.even:hover td {
    color: #222;
    background-color: #FCFBE3;
}
.tg-bf {
    font-weight: bold;
}
.tg-it {
    font-style: italic;
}
.tg-left {
    text-align: left;
}
.tg-right {
    text-align: right;
}
.tg-center {
    text-align: center;
}

JavaScript

$('td').mouseover(function () {
    $(this).siblings().css('background-color', '#EAD575');
    var ind = $(this).index();
    $('td:nth-child(' + (ind + 1) + ')').css('background-color', '#EAD575');
});
$('td').mouseleave(function () {
    $(this).siblings().css('background-color', '');
    var ind = $(this).index();
    $('td:nth-child(' + (ind + 1) + ')').css('background-color', '');
});
// http://lesson8.blogspot.com