Hide/show column

Question

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    #000000    C004

The code would be like this:

<table>
    <tr>
        <th class="Title">ID</th>
        <th class="Title">Color</th>
        <th class="Title">Number</th>
    </tr>
    <tr>
        <td>1</td>
        <td>#990000</td>
        <td>C001</td>
    </tr>
    <tr>
        <td>2</td>
        <td>#009900</td>
        <td>C002</td>
    </tr>
    <tr>
        <td>3</td>
        <td>#FFFFFF</td>
        <td>C003</td>
    </tr>
    <tr>
        <td>4</td>
        <td>#000000</td>
        <td>C004</td>
    </tr>
</table>

How can I add a button (or something else) for each column so I can hide/show the column? I can't add classes to TD's. Is this possible in jquery?

a button on each column? so it can just help you to hide the column, after that it is also be hidden and you have no chance to show the column again. — King King, Jul 04 '14 at 07:25
if you add a button for each column then after hiding that column then that button will also get hidden. so after that you won't be able to show that column. — Amit Kumar, Jul 04 '14 at 07:29
I know, what would you add so the layout is still clean to show/hide a column? — endeka, Jul 04 '14 at 07:37
@endeka: check this fiddle . i think you want this http://jsfiddle.net/Amit12x/52XWf/ — Amit Kumar, Jul 04 '14 at 07:58

Banana · Answer 1 · 2014-07-04T09:10:16.977

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

Example 3 is what I need. Just used the code but for some reason the page is reloaded when I click on a button. Any idea why? — endeka, Jul 04 '14 at 09:07
yes because it still acts like a button, you need to make it not submit, but only do the code. you need to add a var to the click function called 'e' which will receive the event arguments, and then call `e.preventDefault()` to stop the button from doing its default action. i have updated my code — Banana, Jul 04 '14 at 09:09
only one more thing. How can I get the value of the child so I can put the name of in in the button value? — endeka, Jul 04 '14 at 09:22
My looks like this:
value. How can I diplay "value" in my button. I've tried something like $(this).child().child().val() but I get "Object doesn't support property or method 'child'" — endeka, Jul 04 '14 at 09:33
2 options, either `$(this).find("a").text()` or `$("a",$(this)).text()` both will return all anchor elements within the scope of the current header inside the loop. — Banana, Jul 04 '14 at 09:39

score 0 · Answer 2 · answered Jul 04 '14 at 07:37

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 object
        var column = table.column( $(this).attr('data-column') );

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

enguerranws · Answer 3 · 2014-07-04T10:08:45.903

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/

score 0 · Accepted Answer · answered Jul 04 '14 at 09:50

Thanks to @Banana!

This is the code I use:

<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="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>
<div id="togglers"></div>

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

Hide/show column

4 Answers4

Linked