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
Tweet
About The Author
26 comments:
You should post a demo at least.
No demo, no party.
Thanks for your comments.The demo has been added to the post.
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.
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
@David,
It is simple. Give a try
$('td:nth-child(2)').show();
@Anonymous who said it doesn't work with colspans: Did you try it? I did, it works fine.
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!
what if there's a nested table inside a cell?
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.
is there a way to toggle collapse hide by clicking on the column heading instead of a button?
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();
Great job! Very clear even without the demo! thanks just what I needed
@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.
you can use
http://www.jordigirones.com/111-tablesorter-showhide-columns-widget.html
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?
$('#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();
}
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.
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.
Thank. You. So. Much.
Thanks Suprotim for sharing the code. I really appreciate
Do you have a way to make the hidden columns stat that way through post-back in an ASP site?
How can i do this without a button, hide column when page it's loaded
Thanks
how i can use column name not column number
thank you
how i can use column name not column number
thank you
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
Post a Comment