JSFiddle - React, Tailwind, and code Playground

by swfour

HTML

<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

CSS

table, td {
    background-color: white;
    border: 2px solid red;
}
td {
    width: 40px;
    height: 40px;
}
tr:hover td {
    border: 2px solid black;
}
.highlighted {
    border: 2px solid black;
}
.highlightedPrev {
    border-right: 2px solid black;
}
.highlightedPrevRow {
    border-bottom: 2px solid black;
}

JavaScript

$('td').hover(function () {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');

    if (t > 1) {
        var t1 = t - 1;
        //alert("T:" + t + "<br/> T1:" + t1);
        $('td:nth-child(' + t1 + ')').addClass('highlightedPrev');
    }
},

function () {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted ');
    if (t > 1) {
        var t1 = t - 1;
        $('td:nth-child(' + t1 + ')').removeClass('highlightedPrev');
    }
});


$('tr').hover(function () {
    var r = parseInt($(this).index()) + 1;
    if (r > 1) {
        var r1 = r - 1;
        //alert("T:" + t + "<br/> T1:" + t1);
        $('tr:nth-child(' + r1 + ') td').addClass('highlightedPrevRow');
    }
},

function () {
    var r = parseInt($(this).index()) + 1;

    if (r > 1) {
        var r1 = r - 1;
        $('tr:nth-child(' + r1 + ') td').removeClass('highlightedPrevRow');
    }
});