Hide/show Column

In html, is it possible to show/hide columns? For example we have a table like this: ID Color Number 1 #990000 C001 2 #009900 C002 3 #FFFFFF C003 4 #000

Solution 1:

Alright so first of all, since table is constructed as rows with cells, in order to select the whole column you need to use :nth-of-type selector on all of the rows together to select their cells individually.

$('table td:nth-of-type(1),table th:nth-of-type(1)');

note that we select both <td> and <th> to select the header as well.

now, if you only need a hide functionality, you can indeed add a button to every column for hiding purpose:

$(function () {
    $('table th').each(function () {
        $('<button>Hide</button>').appendTo($(this)).click(function () {
            var column_index = $(this).parent().index()+1;
            $('table td:nth-of-type('+column_index+'),table th:nth-of-type('+column_index+')').hide();
        });
    });

});

Example 1

if however, ou need the ability to show the columns again, you need to place the buttons separately or they will disappear together with the columns.

you can for example, put a text box where you would specify the index of the column to hide/show as follows:

add to html:

<input id="col_hide" placeholder="insert col index 1+"></input>
<input type="submit"id="bt_hide" value="hide/show" />

js:

$(function () {
    $('#bt_hide').click(function () {
        var column_index = $('#col_hide').val();
        $('table td:nth-of-type(' + column_index + '),table th:nth-of-type(' + column_index + ')').toggle();
    });
});

Example 2

or if you want your table to be more user-friendly, you can create a button per column outside of the table:

js:

$(function () {
    $('table th').each(function (_id, _value) {
        $('<button>Toggle ' + parseInt(_id + 1) + '</button>').appendTo($("#togglers")).click(function (e) {
            $('table td:nth-of-type(' +  parseInt(_id + 1) + '),table th:nth-of-type(' +  parseInt(_id + 1) + ')').toggle();
            e.preventDefault();
        });
    });

});

Example 3

Solution 2:

You can achieve this using Data table,

http://datatables.net/examples/api/show_hide.html

Here is a javacript code

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );

    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API objectvar column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

Solution 3:

Thanks to @Banana!

This is the code I use:

<scriptsrc="http://code.jquery.com/jquery.min.js"></script><scripttype="text/javascript">
$(function () {
    $('table th').each(function (_id, _value) {
        if(_id > 2){
            $('<span>'+$(this).find("a").text()+'</span>').appendTo    ($("#togglers")).click(function (e) {
                $('table td:nth-of-type(' + parseInt(_id + 1) + '),table     th:nth-of-type(' + parseInt(_id + 1) + ')').toggle();
                e.preventDefault();
            });
        }
    });

});
</script><divid="togglers"></div>

I use _id > 2 because I don't need to filter on first three columns.

Solution 4:

Good question. Handling table columns is pretty hard with jQuery.

If you can't use classes, you'll need to use CSS3 advanced selectors or jQuery selectors.

Like this :

$(document).ready(function(){

    $('table td, table th').addClass('visible'); // visible as default

    $('table').append('<tr class="last-row" />').each(function(){ // add the last row with switch buttons
         $('table tr:first-child th').each(function(){


          $('.last-row').append('<td class="stay-visible"><button class="show-hide-btn">Hide</button></td>');
        });

    });


    // Then manage the buttons
    $(document).on('click', '.show-hide-btn', function(){
       var parentIndex = $(this).parent().index()+1;

       var $currentColumn = $('table td:nth-child('+parentIndex+'), table th:nth-child('+parentIndex+')'); 

       if($currentColumn.hasClass('visible')){
          $(this).text('Show');

       }
       else {
          $(this).text('Hide');
       }
        $currentColumn.each(function(){
            $(this).toggleClass('visible')
        });
    });


});

UPDATED :

Working example : http://jsfiddle.net/H9Zb7/1/