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

Use classes on your tds if you're using an actual HTML Table — SpYk3HH
– SpYk3HH, Commented Apr 12, 2013 at 11:40
i used above code.First time it is working.But from second time it is not working — PSR
– PSR, Commented Apr 12, 2013 at 11:41
Just FYI, updated my answer to give you full explination of what is going on and the jsFiddle included show EXACTLY what you're asking here at work — SpYk3HH
– SpYk3HH, Commented Apr 12, 2013 at 12:11

Chris Dixon · Accepted Answer · 2013-04-12 11:59:09Z

10

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

edited Apr 12, 2013 at 11:59

answered Apr 12, 2013 at 11:49

Chris Dixon

9,1777 gold badges38 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PSR Over a year ago

actually i have checkboxes outside to the table

Chris Dixon Over a year ago

Wherever they are, you just need them in a container, then .index() will still work. So the above example will still work even if you have all <input> inside a <div>.

Tushar Sonawane Over a year ago

@Chris What if there are colspan in table heading?

David Houde · Accepted Answer · 2013-04-12 11:41:32Z

6

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

answered Apr 12, 2013 at 11:41

David Houde

4,7881 gold badge22 silver badges29 bronze badges

1 Comment

David Houde Over a year ago

I just saw more info in your question, looks like you tried this. You will need to specify the table like you did in your question, but this should work.

SpYk3HH · Accepted Answer · 2013-04-12 12:20:57Z

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

PranitG · Accepted Answer · 2013-04-12 11:45:10Z

2

You can get the header index of table and make the table header and td elements hidden. Something like this
Suppose the index of table header is index = 2;

var index= tableHeaderIndex; // 2 here

$('th:nth-child('+index+')').hide();
$('td:nth-child('+index+')').hide();

answered Apr 12, 2013 at 11:45

PranitG

1218 bronze badges

Comments

Dan Twining · Accepted Answer · 2013-04-12 11:59:10Z

Like this?

Lashed together quickly but should work.

<table id="TabToHide">
    <tr>
        <td class="Col1">Col 1</td>
        <td class="Col2">Col 2</td>
        <td class="Col3">Col 3</td>
        <td class="Col4">Col 4</td>
        <td class="Col5">Col 5</td>
    </tr>
    <tr>
        <td class="Col1">Stuff 1</td>
        <td class="Col2">Stuff 2</td>
        <td class="Col3">Stuff 3</td>
        <td class="Col4">Stuff 4</td>
        <td class="Col5">Stuff 5</td>
    </tr>    
</table>

<br />

<table>
    <tr>
        <td><input name="Col1" type="checkbox" checked="checked" /></td>
        <td><input name="Col2" type="checkbox" checked="checked" /></td>
        <td><input name="Col3" type="checkbox" checked="checked" /></td>
        <td><input name="Col4" type="checkbox" checked="checked" /></td>
        <td><input name="Col5" type="checkbox" checked="checked" /></td>
    </tr>
</table>

Javascript

   $('input:checkbox').change(function(){
   var ColToHide = $(this).attr("name");    
    if(this.checked){
        $("td[class='" + ColToHide + "']").show();        
    }else{
        $("td[class='" + ColToHide + "']").hide();
    }

    $('div#Debug').text("hiding " + ColToHide);
});

rahularyansharma · Accepted Answer · 2013-04-12 12:37:22Z

1

 $(document).ready(function(){
    $('table tr input:checkbox').change(function(){
        var num = $(this).parents("th").index(); 
        alert(num);
        if($(this).is(":checked"))
        {

            $('table tbody tr td').eq(num).show();   
        }else
        {
            $('table tbody tr td').eq(num).hide(); 
        }

    });
});

JS FIDDLE LINK

answered Apr 12, 2013 at 12:37

rahularyansharma

10.8k18 gold badges86 silver badges140 bronze badges

Comments

MatHatrik · Accepted Answer · 2017-06-13 13:51:17Z

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Show and Hide Columns in a Table</title>
    <link href="CSS/table.css" rel="stylesheet" />
    <script src="scripts/jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            var $chk = $("#grpChkBox input:checkbox");
            var $tbl = $("#someTable");
            $chk.prop('checked', true);
            $chk.click(function () {
                var colToHide = $tbl.find("." + $(this).attr("name"));
                $(colToHide).toggle();
            });
        });
    </script>
</head>
<body>
    <h2>Show and Hide Columns in a Table</h2>
    <p>Click on each Checkbox to hide corresponding Column</p>
    <div id="grpChkBox">
        <p><input type="checkbox" name="empid" /> Employee ID</p>
        <p><input type="checkbox" name="fname" /> First Name</p>
        <p><input type="checkbox" name="lname" /> Last Name</p>
        <p><input type="checkbox" name="email" /> Email</p>
        <p><input type="checkbox" name="phone" /> Phone</p>
    </div>

    <table id="someTable">
        <thead>
            <tr>
                <th class="empid">EmpId</th>
                <th class="fname">First Name</th>
                <th class="lname">Last Name</th>
                <th class="email">Email</th>
                <th class="phone">Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="empid">E342</td>
                <td class="fname">Bill</td>
                <td class="lname">Evans</td>
                <td class="email">[email protected]</td>
                <td class="phone">234-2345-2345</td>
            </tr>
            <tr>
                <td class="empid">E343</td>
                <td class="fname">Laura</td>
                <td class="lname">Matt</td>
                <td class="email">[email protected]</td>
                <td class="phone">123-1234-5678</td>
            </tr>
            <tr>
                <td class="empid">E344</td>
                <td class="fname">Ram</td>
                <td class="lname">Kumar</td>
                <td class="email">[email protected]</td>
                <td class="phone">345-3456-7890</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

Gabriel Tournier · Accepted Answer · 2022-09-02 12:49:37Z

You can add an "id" on your "th" element and simply call: $('#yourId').hide();

here is the code I've utilized :

$(document).on('click', '.form-check-input', function(e){
  var finition_checked =  $('#finition_select[type="checkbox"]:checked').map(function(){
    return $(this).prop('checked');
  }).get();
  var size_checked = $('#size_select[type="checkbox"]:checked').map(function(){
    return $(this).prop('checked');
  }).get();
  if (finition_checked && size_checked.length === 0){
    $('#price-container').hide();
    $('.table-responsive').show();
    $('#col_size').hide();
  };
  if (finition_checked.length === 0 && size_checked){
    $('#price-container').hide();
    $('.table-responsive').show();
    $('#col_finition').hide();
  };
  if(size_checked && finition_checked){
    $('#price-container').hide();
    $('.table-responsive').show();
  }
  if(size_checked.length === 0 && finition_checked.length === 0){
    $('#price-container').show();
    $('.table-responsive').hide();
  };
  console.log(finition_checked, size_checked)
  var unique_value = [];
  var finition = [];
  var size = [];
  //more logic to come


});

Collectives™ on Stack Overflow

show / hide table columns using jQuery

8 Answers 8

3 Comments

1 Comment

See WORKING jsFIDDLE of YOUR Example

See Example of this Alternate way here!

HTML

JavaScript

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

1 Comment

HTML

JavaScript

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related