show / hide table columns using jQuery

Question

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....

Answer 1

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();
    }
});

Answer 2

Depending on the column # you wanna hide, use this stolen one liner:

$('td:nth-child(2)').hide();

if you use th

$('td:nth-child(2),th:nth-child(2)').hide();

Answer 3

If I got what you mean, you can make it real simple using tr th, tr td and nth-child selector. You can go based on index, but you'll need to add 1 as nth-child is not 0 indexed like elements in jQuery. And the JS doesn't really have to be drawn out. I should mention, placing tr before td:nth is very important in that you don't want "only the nth td". if that's the case, you won't hide every col on every row.

See WORKING jsFIDDLE of YOUR Example

---

FYI: If you want something "cleaner" looking, (like on the turbotax site) dont hide the td itself. Instead make it slightly wider than your largest piece of text, and place each piece of text inside p or div tags inside each cell. Then change you column selector to grab each cell's inner element and hide that instead.

See Example of this Alternate way here!

---

HTML

<table>
    <thead>
        <tr>
            <th>
                <input id="chk1" type="checkbox" />
            </th>
            <th>
                <input id="chk1" type="checkbox" />
            </th>
            <th>
                <input id="chk1" type="checkbox" />
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
    </tbody>
</table>
<button>Reset</button>

JavaScript

$(function() {
    //  Selects your table by id, then the input checkboxes inside the table, you can 
    //  alternate this call with classnames on your inputs if you're going to have 
    //  more inputs than what's desired in call here.
        //  also note i'm using the "change" function and not "click", this simply 
        //  provides easier control of what's going on with your inputs and makes 
        //  later calls (like reset) a much easier call. Less thinking required
    $("#tableId input[type=checkbox]").on("change", function(e) {
        //  First variable grabs the inputs PARENT index, this is the TH containing 
        //  the input, thus the column you want hidden.
        //  The second is calling ALL TH's && TD's having that same index number
        var id = $(this).parent().index()+1,
            col = $("table tr th:nth-child("+id+"), table tr td:nth-child("+id+")");
        //  This simple inline "if" statement checks if the input is checked or now
        //  and shows the columns based on if it IS checked
        $(this).is(":checked") ? col.show() : col.hide();
    }).prop("checked", true).change(); // here i set all inputs to checked without having to write it in the above HTML

    $("button").on("click", function(e) {
        $("input[type=checkbox]").prop("checked", true).change();
    });
})