Question

170

show / hide table columns using jQuery

rated 0 times [ 173] [ 3] / answers: 1 / hits: 56272 / 11 Years ago, fri, april 12, 2013, 12:00:00

I have a table with five columns

column1 column2 column3 column4 column5

------- ------- ------- ------- -------

and I have some check boxes each one for one column when the first checkbox is checked
then I need to show the first column , if unchecked I need to hide first column. Like that
I need to do for all columns.

I found some answers but I did not find any solution .First time it is hiding then other
operations are not working on that.

 $('#tableId td:nth-child(column number)').hide();

Please help me .Thanks in advance....

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mackennamelissac

Add To Favorites

Follow

Total Points: 110

Total Questions: 118

Total Answers: 103

Location: Sweden

Member since Sun, Jan 16, 2022

2 Years ago

answered 11 Years ago charisma · Accepted Answer

Here you go, full solution:

http://jsfiddle.net/vXBtP/

and updated here: http://jsfiddle.net/vXBtP/5/

<table>

   <thead>

       <td><input type=checkbox checked=checked /></td>

       <td><input type=checkbox checked=checked /></td>

       <td><input type=checkbox checked=checked /></td>

       <td><input type=checkbox checked=checked /></td>

       <td><input type=checkbox checked=checked /></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>

    </tbody>

</table>



$(document).on('change', 'table thead input', function() {

    var checked = $(this).is(:checked);



    var index = $(this).parent().index();

    if(checked) {

        $('table tbody tr td').eq(index).show();

    } else {

        $('table tbody tr td').eq(index).hide();

    }

});