jQuery - Table > Hide entire Column, Toggle CSS classes for onClick TD and Checkbox with selected/highlighted Counter

Question

I am looking for jQuery Table with Multiple functionalities like below.

1. Onclick on Hide Column 1 checkboxes at the top, Entire column of the relevant table should be hidden except first column (checkboxes column)

2. OnClick of inside tbody tr td except checkbox, it should apply "highlightTr" class to relevant TR element and onClick of inside tbody tr td checkbox it should apply "selectTr" class to relevant TR and number should be shown in both the scenarios.

3. By clicking on thead th checkbox it should select all checkboxes inside tbody with respective class

Your help is much appreciated, please help me!

HTML:

<label><input type="checkbox" id="col_1">Hide Column 1</input></label>
<label><input type="checkbox" id="col_2">Hide Column 2</input></label>
<label><input type="checkbox" id="col_3">Hide Column 3</input></label>

<div class="selected-counter">Selected: <span>0</span></div>
<div class="highlighted-counter">Highlighted: <span>0</span></div>

<table width="100%" cellpadding="0" cellspacing="0" class="reddyTable">
    <thead>
        <tr>
            <th><input type="checkbox" name="cbAll" id="cbAll" /></th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td><input type="checkbox" id="cb1" name="cb1" /></td>
            <td>Lorem Ipsum</td>
            <td>Dolar sit</td>
            <td>Amet</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb2" name="cb2" /></td>
            <td>Pellentesque</td>
            <td>semper arcu</td>
            <td>eget molestie</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb3" name="cb3" /></td>
            <td>ex rutrum et</td>
            <td>Vivamus</td>
            <td>efficitur</td>
        </tr>
    </tbody>

</table>

CSS:

body{font-family:Arial;}

label{margin-right:15px;}
table.reddyTable{border:1px solid #ccc;margin-top:20px;border-collapse:collapse;}
table.reddyTable th{text-align:left;border:1px solid #aaa;padding:5px;background:#ddd;}
table.reddyTable td{border:1px solid #ccc;padding:5px;}
table.reddyTable tr.highlightTr td{background:#ffe599;}
table.reddyTable tr.selectTr td{background:#6aa84f;}


.selected-counter,.highlighted-counter{margin-top:20px;font-weight:normal;font-size:12px;}
.selected-counter span,.highlighted-counter span{font-weight:bold;font-size:16px;position:relative;bottom:-2px;}
.selected-counter{color:#555;}
.highlighted-counter{color:#2e4267;}  

jSFiddle is here

Answer 1

jQuery(document).on('click','[id^="col_"]',function(){
  var i = jQuery(this).attr('id').match(/([0-9]+)$/i) ;
  var visible = ! jQuery(this).is(':checked') ;
  if ( i.length > 1 )
  {
    i = parseInt(i[1]) + 1 ;
    jQuery('table.reddyTable tbody tr, table.reddyTable thead tr').each(function(){
      jQuery(this).find(':nth-child('+i+')').toggle(visible) ;
    }) ;
  }
}) ;

jQuery(document).on('click','table.reddyTable tbody td',function(){
  jQuery(this).closest('tr').toggleClass('highlightTr') ;
  jQuery(this).closest('table').trigger('stateChange') ;
}) ;

jQuery(document).on('change','table.reddyTable tbody input[type="checkbox"]',function(){
  jQuery(this).closest('tr').toggleClass('selectTr',jQuery(this).is(':checked')) ;
  jQuery(this).closest('table').trigger('stateChange') ;
}) ;

jQuery(document).on('stateChange','table.reddyTable',function(){
 jQuery('div.highlighted-counter span').html(jQuery(this).find('tr.highlightTr').length) ;
 jQuery('div.selected-counter span').html(jQuery(this).find('tr.selectTr').length) ;
}) ;

jQuery(document).on('change','table.reddyTable thead input[type="checkbox"]',function(){
  jQuery(this).closest('table').find('tbody td input').prop('checked',jQuery(this).is(':checked')).trigger('change') ;
}) ;

body{font-family:Arial;}

label{margin-right:15px;}
table.reddyTable{border:1px solid #ccc;margin-top:20px;border-collapse:collapse;}
table.reddyTable th{text-align:left;border:1px solid #aaa;padding:5px;background:#ddd;}
table.reddyTable td{border:1px solid #ccc;padding:5px;}
table.reddyTable tr.highlightTr td{background:#ffe599;}
table.reddyTable tr.selectTr td{background:#6aa84f;}


.selected-counter,.highlighted-counter{margin-top:20px;font-weight:normal;font-size:12px;}
.selected-counter span,.highlighted-counter span{font-weight:bold;font-size:16px;position:relative;bottom:-2px;}
.selected-counter{color:#555;}
.highlighted-counter{color:#2e4267;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" id="col_1">Hide Column 1</input></label>
<label><input type="checkbox" id="col_2">Hide Column 2</input></label>
<label><input type="checkbox" id="col_3">Hide Column 3</input></label>

<div class="selected-counter">Selected: <span>0</span></div>
<div class="highlighted-counter">Highlighted: <span>0</span></div>

<table width="100%" cellpadding="0" cellspacing="0" class="reddyTable">
    <thead>
        <tr>
            <th><input type="checkbox" class="selectAll" /></th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td><input type="checkbox" id="row_1" name="reddyCheckbox[]" /></td>
            <td>Lorem Ipsum</td>
            <td>Dolar sit</td>
            <td>Amet</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="row_2" name="reddyCheckbox[]" /></td>
            <td>Pellentesque</td>
            <td>semper arcu</td>
            <td>eget molestie</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="row_3" name="reddyCheckbox[]" /></td>
            <td>ex rutrum et</td>
            <td>Vivamus</td>
            <td>efficitur</td>
        </tr>
    </tbody>
    
</table>

Answer 2

I can only suggest jquery-bootgrid. I have only started to use bootgrid myself just now but it seems like the most promising html5 grid available at the moment.

See this site for several bootgrid related questions already. Try edit or repost your post with a jquery-bootgrid tag - I believe the author of bootgrid is polling this site to assist with questions. Also see the author's site: http://www.jquery-bootgrid.com/

The examples and documentation on the site wasn't extremely helpful for me as I'm a real absolute beginner so they're a bit high level. If you have a little experience they'll be great.

Cheers