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>
Before hiding Column 2, the table appears as shown below:
After clicking the button ‘Hide Column 2’, the table appears as shown below:
Read more about the nthchild selector over here Selectors/nthChild
A live demo can be tested over here
Bookmark this link on del.icio.us (saved by 0 users)
Did you like this post?
|
|
||
|
|
|
|
|
subscribe via rss |
|
subscribe via e-mail |
|
print this post |
|
follow me on twitter |
comments
14 Responses to "Hide a Table Column with a Single line of jQuery code"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.
Post a Comment