JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<table class="clickable">
    <tr><td><input type="checkbox" name="checkme" />George Washington</td></tr>
    <tr><td><input type="checkbox" name="checkme" />John Adams</td></tr>
    <tr><td><input type="checkbox" name="checkme" />Thomas Jefferson</td></tr>
</table>

CSS

table.clickable tr:hover {cursor: pointer; }
table.clickable tr.selected td, table.clickable tr.selected:hover td { background: orange; }
table.clickable tr input[type="checkbox"]:first-child {display: none; }
table.clickable tr:hover td { background: #EEEEEE; }

JavaScript

var tables = GEBCN('clickable');

for(var i = 0; i < tables.length; i++){
    var trs = tables[i].getElementsByTagName('tr');
    for(var j = 0; j < trs.length; j++){
        trs[j].onclick = function(){
           var c = this.getElementsByTagName('input');
           for(var i = 0; i < c.length; i++)
               if(c[i].type == 'checkbox'){
                   c[i].checked = !c[i].checked;
                   if(c[i].getAttribute('checked'))
                       c[i].removeAttribute('checked');
                    else
                       c[i].setAttribute('checked', 'checked');
               }
           toggleClass(this, 'selected');
        };
    }
}

function GEBCN(c){
 
    if(document.getElementsByClassName)
        return document.getElementsByClassName(c);
 
    var els = [];
    var all = document.getElementsByTagName("*");
 
    for(var i = all.length; i--;)
        if(hasClass(all[i], c))
            els.push(all[i]);
 
    return els;
 
};
    
function hasClass(el,c){
    var elc = ' '+el.className+' ';
    if(elc.indexOf(' '+c+' ') < 0)
        return false;
    return true;    
}

function addClass(el, c){
    if(c.indexOf(' ') >= 0)
        return false;
    if(hasClass(el, c))
        return true;
    el.className += ' '+c;
    return true;
}
    
function removeClass(el, c){
    if(c.indexOf(' ') > -1)
        return false;
    if(!hasClass(el, c))
        return true;
    var elc = (' '+el.className).replace(' '+c, '');
    if(elc.indexOf(' ') == 0)
        elc = elc.substring(1);
    el.className = elc;
    return true;
}
    
function toggleClass(el, c){
    if(hasClass(el, c))
        removeClass(el,c);
    else
        addClass(el,c);
}