JSFiddle - React, Tailwind, and code Playground

by blueberrymuffin

HTML

<div class="css-table">
    <div class="css-table-tr">
        <div class="css-table-td" id="1">b</div>
        <div class="css-table-td" id="2">c</div>
        <div class="css-table-td" id="3">e</div>
       </div>
</div>
<br/>
<div class="css-table">
    <div class="css-table-tr">
        <div class="css-table-td" id="1">b</div>
        <div class="css-table-td" id="2">c</div>
        <div class="css-table-td" id="3">e</div>
       </div>
</div>
<br/>
<div class="css-table">
    <div class="css-table-tr">
        <div class="css-table-td" id="1">b</div>
        <div class="css-table-td" id="2">c</div>
        <div class="css-table-td" id="3">e</div>
       </div>
</div>
<br/>


<INPUT TYPE="submit" id="csstableinfo" VALUE="Count Selected">

CSS

.css-table {
    display: table;
    background-color:#ccc;
}
.css-table-tr {
    display: table-row;
     height:30px;
}
.css-table-td {
    display: table-cell;
    border:1px solid #fff;
    width: 30px;
    text-align:center;
    vertical-align:middle;
}
.highligh-cell {
    background: #999;
}

JavaScript

$('.css-table-td').click(function () {
    var theTable = $(this).closest('.css-table');
    $(this).toggleClass("highligh-cell");
});

$("#csstableinfo").click(function () {
    var msg = "";
    $(".css-table").each(function(index) {
        var sCount = $(this).find('.highligh-cell').length;
        msg += "table_" + index + " = " + sCount + "\n";
    });
    alert(msg);
});