JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Column4</th>
            <th>Column5</th>
        </tr>
    </thead>
    <tbody>
        <tr class="red">
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr class="blue">
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr class="red">
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr class=blue "">
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr class="red">
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
    </tbody>
</table>

CSS

.red {
    background: red
}

.blue {
    background: blue
}

.gray {
    background: gray
}

.white {
    background: white
}

JavaScript

$(document).ready(function() {

    $("tbody tr").hover(function() {
        $(this).toggleClass("gray")
    });

    $("tbody tr").click(function() {
        $(this).toggleClass("white")
    });
});