JSFiddle - React, Tailwind, and code Playground

by ZenMaster

HTML

<table id="table">
    <tr>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
     <tr>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
     <tr>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
</table>

CSS

table td {
    border: 1px solid #ccc;
}

td.checked {
    background: red;
}

JavaScript

var handler = function(event) {
    if(event.target.parentNode.className.indexOf('checked') < 0 ) {
        event.target.parentNode.className += ' checked';
    } else {
        event.target.parentNode.className = event.target.parentNode.className.replace('checked', '');
    }
}

var table = document.getElementById('table');
table.addEventListener('click', handler);