How to hide table columns using checkboxs and save preference with jquery

Question

Given the below HTML table, I would like to hide columns when their checkboxes are un-checked and show them when the boxes are checked then save the preference of hiding or showing the columns so that when the page reloads, the columns are shown or hidden based on the preference.

How can I do this using jQuery? Do I need to use cookies?

<table>
    <thead>
        <td>
            <input type="checkbox" checked="checked" id="opt1" />
        </td>
        <td>
            <input type="checkbox" checked="checked" id="opt2" />
        </td>
        <td>
            <input type="checkbox" checked="checked" id="opt3" />
        </td>
        <td>
            <input type="checkbox" checked="checked" id="opt4" />
        </td>
        <td>
            <input type="checkbox" checked="checked" id="opt5" />
        </td>
    </thead>
    <tbody>
        <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>
    </tbody>
</table>

read [link](http://stackoverflow.com/questions/8422878/persisting-jqgrid-column-preferences) like you. full description. — MJ Vakili, Apr 13 '15 at 04:46
now that your question has been reopened, you can mark it as answered : ) — Wesley Smith, Apr 16 '15 at 14:32

score 2 · Answer 1 · edited May 23 '17 at 11:50

Welcome to SO, you should really show what you have attempted so far on your own when asking questions. See--> How do I ask a good question?

That said, the below will do what you need using localStorage:

jQuery:

// "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') );

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>

Here's a working jsFiddle

Thanks guys it goes like this checkbox checkbox checkbox checkbox TableCol1 TableCol2 TableCol3 TableCol4 TableCol1 TableCol2 TableCol3 TableCol4 TableCol1 TableCol2 TableCol3 TableCol4 .... ... .... .... if i unchecked the checkbox above it will hide the column below it then save preference. And when page reload it will show the preference done.example If unchecked col1 col3 it will hide the table column and when i reload, it will keep that preference — adolfozen, Apr 13 '15 at 10:53
Are you saying that you want a checkbox to show or hide each column? — Wesley Smith, Apr 13 '15 at 10:55
im able to do the hide show but not able to do the save preference thing here is what i have $(document).on('change', 'table thead input', function() { var checked = $(this).is(":checked"); localStorage.setItem('state', 'true'); var index = $(this).parent().index(); $('table tbody tr').each(function() { if(checked) { $(this).find("td").eq(index).show(); } else { $(this).find("td").eq(index).hide(); } }); }); — adolfozen, Apr 14 '15 at 05:05
column 1column 2column 3column 4 column 5column 1column 2column 3column 4column 5column 1column 2column 3column 4column 5 — adolfozen, Apr 14 '15 at 05:11
No problem. I updated, my answer above. However, you will not be able to have the checkboxes in the table like you show. If you did that, when you hide the column, it would also hide the checkbox leaving you with no way to show the column again. My example avoids this by putting the boxes in a separate table. — Wesley Smith, Apr 14 '15 at 08:16

undefined variable · Answer 2 · 2019-06-14T13:16:15.033

If you have some columns that are unchecked by default. These Columns will not be hidden for visitors who have never been to the page before, even though they are are in a unchecked state.

As 'states' will be null, and the setStates function will never run.

This modified version of DelightedD0D's answer should fix.

  // "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

    //  localStorage.clear(); uncomment this line to clear local storage.
    var states = [];

    $('.opt').change(function() {
        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));
        } else {        
            states = [];
            $('.opt').each(function() {
                if (!$(this).is(':checked')) states.push($(this).data('control-column'));
            });
            setSates(states);
        }
    }
    // this will read and set the initial states when the page loads
    setSates(localStorage.getItem('states'));

How to hide table columns using checkboxs and save preference with jquery

2 Answers2

Here's a working jsFiddle