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:

image

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

image

See a Live Demo

You can also check plenty of other jQuery Tips here



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

24 comments:

Anonymous said...

You should post a demo at least.

Anonymous said...

No demo, no party.

Suprotim Agarwal said...

Thanks for your comments.The demo has been added to the post.

Anonymous said...

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

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

@David,
It is simple. Give a try
$('td:nth-child(2)').show();

webRat said...

@Anonymous who said it doesn't work with colspans: Did you try it? I did, it works fine.

Anonymous said...

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!

Anonymous said...

what if there's a nested table inside a cell?

sarankamal said...

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.

Joe said...

is there a way to toggle collapse hide by clicking on the column heading instead of a button?

Anonymous said...

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

Anonymous said...

Great job! Very clear even without the demo! thanks just what I needed

JokeyRhyme said...

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

Anonymous said...

you can use

http://www.jordigirones.com/111-tablesorter-showhide-columns-widget.html

Anonymous said...

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

$('#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 Garg said...

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.

Anonymous said...

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.

Anonymous said...

Thank. You. So. Much.

Jhonny Marcelo said...

Thanks Suprotim for sharing the code. I really appreciate

JC Webb said...

Do you have a way to make the hidden columns stat that way through post-back in an ASP site?

Javier said...

How can i do this without a button, hide column when page it's loaded

Thanks

Ahmad Kh said...

how i can use column name not column number

thank you