JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<table border='1'>
    <tbody>
        <tr>
            <td>text</td>
            <td>text</td>
        </tr>
        <tr>
            <td>text</td>
            <td>text</td>
        </tr>
        <tr>
            <td>text</td>
            <td>text</td>
        </tr>
        <tr>
            <td>text</td>
            <td>text</td>
        </tr>
        <tr>
            <td>text</td>
            <td>text</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border: 1px solid;
    width: 300px;
}

.even {
    background-color: #DDD;
}

.active {
    background-color: #000;
    color: #FFF;
}

.visited {
    background-color: red;
}

JavaScript

$('table tr:even').addClass('even');
$('table tbody').delegate('tr', 'mouseenter', function() { 
    $(this).addClass("active");
}).delegate('tr', 'mouseleave', function() {
    $(this).removeClass("active");
}).delegate('tr', 'click', function(){
  $(this).closest('tr').toggleClass('visited').siblings().removeClass('visited');
});