JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr><td>dfdf</td><td>fdfdf</td><td>fdsfdsf</td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>sss</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td>sss</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

CSS

table tr td {
    border: 1px solid grey;
    padding: 10px;
}

table tr td.selected {
    background-color: rgb(200, 200, 255);
}

JavaScript

$('table td').hover(function() {
    for (var x = 0; x <= $(this).index(); x++) {
        for (var y = 0; y <= $(this).parent().index(); y++) {
            $(this).parent().parent().children().eq(y).children().eq(x).addClass('selected');
        }
    }
}, function() {
    $('table td').removeClass('selected');
});