JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

Click a cell to toggle the class and update the count.<br /><br />

<div id="table1">
    <div class="column">
        <div class="selectedCell">1</div>
        <div>2</div>
        <div class="selectedCell">3</div>
        <div class="selectedCell">4</div>
        <div>5</div>
        <div>6</div>
        <div class="selectedCell">7</div>
    </div>
    <div class="column">
        <div class="selectedCell">8</div>
        <div class="selectedCell">9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
    </div>
    <div class="column">
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div class="selectedCell">18</div>
        <div>19</div>
        <div>20</div>
        <div class="selectedCell">21</div>
    </div>
    <div class="column">
        <div class="selectedCell">22</div>
        <div class="selectedCell">23</div>
        <div class="selectedCell">24</div>
        <div class="selectedCell">25</div>
        <div>26</div>
        <div class="selectedCell">27</div>
        <div>28</div>
    </div>
    <div class="column">
        <div>29</div>
        <div class="selectedCell">30</div>
        <div>31</div>
        <div class="selectedCell">32</div>
        <div>33</div>
        <div>34</div>
        <div class="selectedCell">35</div>
    </div>
</div>
<p style="clear:both">page 2</p>
<div id="table2">
    <div class="column">
        <div class="selectedCell">1</div>
        <div>2</div>
        <div class="selectedCell">3</div>
        <div class="selectedCell">4</div>
        <div>5</div>
        <div>6</div>
        <div class="selectedCell">7</div>
    </div>
    <div class="column">
        <div class="selectedCell">8</div>
        <div class="selectedCell">9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
    </div>
    <div class="column">
        <div>15</div>
        <div>16</div>
       ...

CSS

body {
    font-family:Arial, sans-serif;
}

.column {
    float:left;
}
.selectedCell {
    background-color:yellow;
}

.column div {
    border:1px solid #000;
    padding:4px;
    margin:3px;
    width:20px;
    height:20px;
    text-align:center;
    cursor:pointer;
}

#status {
    background-color:#F0F0F0;
    padding:10px;
    border:1px solid #666;
    font-family:Arial, sans-serif;
    float:left;
    margin-left:30px;
}

JavaScript

function update_counts(){
    $('#status').html('');
    var _parent = '';
    var i = 0;
    var selected_map = '';
    $('.column').each(function(){
        if($(this).parent().attr('id') != _parent)
        {
            _parent = $(this).parent().attr('id');
            i = 0;
        }
        var selected_count = $(this).find('.selectedCell').length;
        
        $('#status').append(selected_count + ' selected cells in ' + _parent + '-> column ' + (i + 1) + '<br />');
        i++;
        $('#' + _parent).data('col' + i, selected_count);
    }); 
    
    // Example, lets see how many are selected in #table one, column 4
    alert($('#table1').data('col4'));
}

$('.column div').click(function(){
    
    // Add or remove class
    $(this).toggleClass('selectedCell');
    
    // Update the class counts
    update_counts();
    
});

// Run the function on domready
$(function(){
    update_counts();
});