JSFiddle - React, Tailwind, and code Playground

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 tbody tr').each(function() {
    $('table tr:even').addClass('even');
    
    $(this).hover(function(){
        $(this).toggleClass("active");
    });
    
    $(this).click(function(){
        $(this).closest('tr').toggleClass('visited');
    })
    
});