JSFiddle - React, Tailwind, and code Playground

by thebabydino

HTML

<table>
    <tbody>
        <tr><td>content</td><td>content</td><td>content</td></tr>
        <tr><td>content</td><td>content</td><td>content</td></tr>
        <tr><td>content</td><td>content</td><td>content</td></tr>
        <tr><td>content</td><td>content</td><td>content</td></tr>
        <tr><td>content</td><td>content</td><td>content</td></tr>
    </tbody>
</table>

CSS

tr:hover, tr.selected {
    background-color: #FFCF8B
}
td {padding: 5px;}

JavaScript

var trs = document.querySelectorAll("tr");
for(var i = 0; i < trs.length; i++){
    trs[i].addEventListener("click", function(){
        var cn = this.className, thc = " selected", start_idx = cn.indexOf(thc);
        if(start_idx == -1) cn += thc;
        else cn = cn.replace(thc,"");
        
        console.log("#"+cn(0,start_idx)+"#");
        this.className = cn;
    });
}