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:
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
TweetAbout The Author
![Suprotim Agarwal](https://1.bp.blogspot.com/-qCiXeR16Nk4/VpNzV1amNEI/AAAAAAAAEBA/RgejStKWThg/s200/supro.png)
Từ khóa » Html Table Hide Column
-
How To Hide Columns In HTML Table? - Stack Overflow
-
Hiding Columns - FooTable - GitHub Pages
-
Show Or Hide Table Columns - HTML DOM
-
Column Toggle Table - Tryit Editor V3.7
-
Is There An Easy Way To Hide A Table Column/rows That Contain Labels?
-
How To Hide A Column In Html Table Using Css?
-
Show / Hide HTML Table Columns By JQuery: 3 Demos
-
Show Hide Table Column Using JavaScript
-
Hidden Columns - DataTables Example
-
Table: Column Toggle - JQuery Mobile Demos
-
Hide Table Column Using JavaScript - Dotnet Learners
-
DataTables Example - Show / Hide Columns Dynamically
-
Automatic Column Hiding Using CSS In Responsive Table - Phppot
-
Hiding Table Columns - Any Simple Way? - CSS-Tricks