JSFiddle - React, Tailwind, and code Playground

by TheNix

HTML

<table>
    <tr>
        <td>Strawberries</td>
        <td>Free and delicious!</td>
    </tr>
    <tr>
        <td>Bananas</td>
        <td>Yellow and curvy!</td>
    </tr>
    <tr>
        <td>Bacon</td>
        <td>Tasty forbidden fruit!</td>
    </tr>
</table>

CSS

table { margin:10px; }
td { padding:5px 15px; }

tr:hover { background:#eee; }

tr.selected { background:yellow; }

JavaScript

$('tr').on('click', function(){
   $(this).siblings('tr').removeClass('selected');
    $(this).addClass('selected'); 
});