DevCurry: Hide a Table Column with a Single line of jQuery code

In one of my previous articles, Using jQuery to Delete a Row in a Table by just Clicking on it I showed you how to delete a Table Row. Continuing my ‘Less is More’ journey with jQuery, today I will show you how to Hide a Column with a Single line of jQuery code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.3.2.js"
    type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnHide').click(function() {
                $('td:nth-child(2)').hide();
                // if your table has header(th), use this
                //$('td:nth-child(2),th:nth-child(2)').hide();
            });
        });
    </script>
</head>
<body>
<table id="tableone" border="1">
    <tr class="del">
        <td>Row 0 Column 0</td>
        <td >Row 0 Column 1</td>
        <td >Row 0 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 1 Column 0</td>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 3 Column 0</td>
        <td>Row 3 Column 1</td>
        <td>Row 3 Column 2</td>
    </tr>
     <tr class="del">
        <td>Row 4 Column 0</td>
        <td>Row 4 Column 1</td>
        <td>Row 4 Column 2</td>
    </tr>
     <tr class="del">
        <td>Row 5 Column 0</td>
        <td>Row 5 Column 1</td>
        <td>Row 5 Column 2</td>
    </tr>
</table>
    <input id="btnHide" type="button" value="Hide Column 2"/>

</body>
</html>

Read more about the nthchild selector over here Selectors/nthChild

Before hiding Column 2, the table appears as shown below:

After clicking the button ‘Hide Column 2’, the table appears as shown below:

See a Live Demo

You can also check plenty of other jQuery Tips here

26 comments:

AnonymousJuly 13, 2009 at 8:39 AM
You should post a demo at least.
AnonymousJuly 14, 2009 at 3:32 AM
No demo, no party.
Suprotim AgarwalJuly 14, 2009 at 9:46 AM
Thanks for your comments.The demo has been added to the post.
AnonymousJuly 14, 2009 at 3:44 PM
This does not work when your table has col or row spans. In that case you might want to take a look at the jQuery Column cell selector plugin.
David LeeOctober 14, 2009 at 3:28 PM
Hi,
I was wondering how to show the same column again using another button/link? So one button/link to hide and another button/link to show it again.

Is there an easy way to do that?

David
CF MitrahNovember 25, 2009 at 5:14 AM
@David,
It is simple. Give a try
$('td:nth-child(2)').show();
webRatNovember 25, 2009 at 6:20 AM
@Anonymous who said it doesn't work with colspans: Did you try it? I did, it works fine.
AnonymousDecember 3, 2009 at 7:23 AM
would have been a little clearer if your example table data had column indexes starting at 1 not 0

When I first read the post I thought it was wrong since the "Row X Cell 2" data was still showing!
AnonymousFebruary 16, 2010 at 4:18 PM
what if there's a nested table inside a cell?
sarankamalMarch 24, 2010 at 3:58 AM
hi can u please tell me for how many rows it will work. As of now i have less than 1000 rows and 25 columns. it is working fine now.but my table will grow more than 10 lakhs.
JoeApril 7, 2010 at 1:34 AM
is there a way to toggle collapse hide by clicking on the column heading instead of a button?
AnonymousMay 19, 2010 at 8:06 AM
If you want to select which table to do this on use the id of the table like this:

$("#tableid th:nth-child(#)".hide();
$("#tableid td:nth-child(#)".hide();
AnonymousJune 21, 2010 at 8:44 AM
Great job! Very clear even without the demo! thanks just what I needed
UnknownJuly 27, 2010 at 12:11 AM
@sarankamal:

I've tried this on a website destined for iPhone with a very large table (1000 rows, 6 columns) and the user-interface locks and becomes unresponsive for several seconds. You definitely want to be careful about devices/browsers with low JavaScript performance.
AnonymousJune 16, 2011 at 12:13 AM
you can use

http://www.jordigirones.com/111-tablesorter-showhide-columns-widget.html
AnonymousSeptember 11, 2011 at 8:59 AM
I would like to hide the columns of a table that is in a div with the ID of Table10.

How would i do this?
Suprotim AgarwalSeptember 11, 2011 at 10:00 PM
$('#Table10 td:nth-child(2)').hide();

or if you want to make the column number generic, pass it to a method

function hideColumn(colIndex) {
$('#Table10 td:nth-child('+(colIndex+1)+')').hide();
}
Rakhi GargSeptember 22, 2011 at 5:53 AM
table style="border: 2px dashed Green" id="tbl"

I have two columns in table.

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

Hi, i am using above code. Your provided code to hide a column is woring but by right-border also hide.
Please help how may i go with my border style same after hiding the column.
I mean border style should not be effected on column hiding.
Pleaseeeeeeee help.
AnonymousOctober 6, 2011 at 7:03 AM
this doesn't work the way I thought it would. Yes, you are hiding column 2 but the data that was previously in column 2 is shifted to column 1. Not what I expected.
AnonymousDecember 10, 2011 at 9:52 AM
Thank. You. So. Much.
UnknownJune 11, 2014 at 10:28 PM
Thanks Suprotim for sharing the code. I really appreciate
UnknownJuly 30, 2014 at 5:44 PM
Do you have a way to make the hidden columns stat that way through post-back in an ASP site?
JavierFebruary 5, 2015 at 8:02 AM
How can i do this without a button, hide column when page it's loaded

Thanks
UnknownApril 29, 2016 at 2:03 PM
how i can use column name not column number

thank you
UnknownApril 29, 2016 at 2:29 PM
how i can use column name not column number

thank you
CHAITANYA KIRAN KASANIAugust 31, 2016 at 6:20 AM
Hard coded column td tag data is hiding but , if columns are filled with data from object is not hiding, only header is hiding but data with column is not hiding