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, ASP.NET Architecture MVP 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 has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

20 Responses to "Hide a Table Column with a Single line of jQuery code"
  1. Anonymous said...
    July 13, 2009 at 8:39 AM

    You should post a demo at least.

  2. Anonymous said...
    July 14, 2009 at 3:32 AM

    No demo, no party.

  3. Suprotim Agarwal said...
    July 14, 2009 at 9:46 AM

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

  4. Anonymous said...
    July 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.

  5. David Lee said...
    October 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

  6. CF Mitrah said...
    November 25, 2009 at 5:14 AM

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

  7. webRat said...
    November 25, 2009 at 6:20 AM

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

  8. Anonymous said...
    December 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!

  9. Anonymous said...
    February 16, 2010 at 4:18 PM

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

  10. sarankamal said...
    March 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.

  11. Joe said...
    April 7, 2010 at 1:34 AM

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

  12. Anonymous said...
    May 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();

  13. Anonymous said...
    June 21, 2010 at 8:44 AM

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

  14. JokeyRhyme said...
    July 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.

  15. Anonymous said...
    June 16, 2011 at 12:13 AM

    you can use

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

  16. Anonymous said...
    September 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?

  17. Suprotim Agarwal said...
    September 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();
    }

  18. Rakhi Garg said...
    September 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.

  19. Anonymous said...
    October 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.

  20. Anonymous said...
    December 10, 2011 at 9:52 AM

    Thank. You. So. Much.

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions