Hide/ Show Columns

by Wesley Smith

HTML

<table border="1">
        <tr>
        <td>
            <input type="checkbox" checked="checked" data-control-column="1" class="opt" /> option one  
        </td>
        <td>
            <input type="checkbox" checked="checked" data-control-column="2" class="opt" /> option two 
        </td>
        <td>
            <input type="checkbox" checked="checked" data-control-column="3" class="opt" /> option three 
        </td>
        <td>
            <input type="checkbox" checked="checked" data-control-column="4" class="opt" /> option four 
        </td>
        <td>
            <input type="checkbox" checked="checked" data-control-column="5" class="opt" /> option five 
        </td>
        </tr>
</table> 
<br><br>
<table border="1" id="myTable">
        <tr>
            <td>column 1</td>
            <td>column 2</td>
            <td>column 3</td>
            <td>column 4</td>
            <td>column 5</td>
        </tr>
        <tr>
            <td>column 1</td>
            <td>column 2</td>
            <td>column 3</td>
            <td>column 4</td>
            <td>column 5</td>
        </tr>
        <tr>
            <td>column 1</td>
            <td>column 2</td>
            <td>column 3</td>
            <td>column 4</td>
            <td>column 5</td>
        </tr>
        <tr>
            <td>column 1</td>
            <td>column 2</td>
            <td>column 3</td>
            <td>column 4</td>
            <td>column 5</td>
        </tr>
</table>

JavaScript

// "data-control-column" is a custom data attrubute added to the html checkboxes
// when a check box changes loop through all, for any that are unchecked, add that checkbox's "data-control-column" value to our array
$('.opt').change(function(){ 
    var states = [];
    $('.opt').each(function(){
           if(!$(this).is(':checked')) states.push($(this).data('control-column'));         
    });
    setSates(states);
});

// when we need to set the sate of the UI, loop through the checkboxes checking if their "data-control-column" are in the "states" array 
// if so, hide the specified column and uncheck the box
function setSates(states){
     if(states){
         if(!$.isArray( states )) states = JSON.parse(states); // if sates came from localstorage it will be a string, convert it to an array
         $('.opt').each(function(i,e){ 
             var column =$(this).data('control-column');
             if($.inArray( column, states ) == -1){
                 $(this).attr('checked', true);
                 $('#myTable td:nth-child('+column+'), #myTable th:nth-child('+column+')').show(); 
             }
             else{
                 $(this).attr('checked', false);
                 $('#myTable td:nth-child('+column+'), #myTable th:nth-child('+column+')').hide(); 
             }
         });
         localStorage.setItem('states', JSON.stringify(states));
     }
}
// this will read and set the initial states when the page loads
setSates( localStorage.getItem('states') );