Hide A Table Column With A Single Line Of JQuery Code - DevCurry

Trang chủ » Html Table Hide Column When Small » Hide A Table Column With A Single Line Of JQuery Code - DevCurry

Có thể bạn quan tâm

Tweet

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

Tweet

About The Author

Suprotim Agarwal Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook. Follow him on twitter @suprotimagarwal.

Từ khóa » Html Table Hide Column When Small