Hiding A Table Column If The Containing Cells Are Empty With JQuery

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Hiding a table column if the containing cells are empty with jQuery Ask Question Asked 12 years, 10 months ago Modified 12 years, 10 months ago Viewed 14k times 6

I have a table of the following kind:

<table id="mytable" width="500" border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th><span>1</th><th><span>2</th><th><span>3</th> </tr> </thead> <tbody> <tr> <td><span>1/span></td> <td><span></span></td> <td><span>2/span></td> </tr> <tr> <td><span>1</span></td> <td><span></span></td> <td><span>2</span></td> </tr> <tr> <td><span>1</span></td> <td><span></span></td> <td><span>2</span></td> </tr> </tbody> </table>

What I need to do is - hide all the columns of this table where the <span> element contained by the table cell is empty. I will need to hide the cell fully, with the <th> element on the top. In my example above it's the middle column but there may be a lot of them, not only one.

Could anybody advise over this?

Thanks in advance.

• jquery

Share Improve this question Follow asked Jan 25, 2012 at 13:15 cycerocycero 4,7312020 gold badges5757 silver badges8181 bronze badges Add a comment |

3 Answers 3

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 17

This should work:

$(document).ready(function() { hideEmptyCols($("#mytable")); }); function hideEmptyCols(table) { //count # of columns var numCols = $("th", table).length; for ( var i=1; i<=numCols; i++ ) { var empty = true; //grab all the <td>'s of the column at i $("td:nth-child(" + i + ")", table).each(function(index, el) { //check if the <span> of this <td> is empty if ( $("span", el).text() != "" ) { empty = false; return false; //break out of each() early } }); if ( empty ) { $("td:nth-child(" + i + ")", table).hide(); //hide <td>'s $("th:nth-child(" + i + ")", table).hide(); //hide header <th> } } }

Or (simpler):

function hideEmptyCols(table) { var rows = $("tr", table).length-1; var numCols = $("th", table).length; for ( var i=1; i<=numCols; i++ ) { if ( $("span:empty", $("td:nth-child(" + i + ")", table)).length == rows ) { $("td:nth-child(" + i + ")", table).hide(); //hide <td>'s $("th:nth-child(" + i + ")", table).hide(); //hide header <th> } } } Share Improve this answer Follow edited Jan 25, 2012 at 13:42 answered Jan 25, 2012 at 13:29 Matt MacLeanMatt MacLean 19.6k77 gold badges5151 silver badges5353 bronze badges 4

• Thanks for helping @maclema. Could you also advise if it's possible to "skip" the first column in the table and not hide it? The case is that the first column consists of <th> tags without <span> inside and it's kind of a table vertical header which I don't want to hide while with your functions it is being hidden as well. – cycero Commented Jan 25, 2012 at 17:07
• Got it to work, just added $("th:nth-child(1)", table).show(); in the end. If even the function hides the first column, I explicitly show it afterwards. – cycero Commented Jan 25, 2012 at 17:14
• This worked great once I figured out that Bootstrap class 'visible-lg' was overriding the jQuery, LOL, causing a few columns to still show. Once I removed the class, indeed all blanks columns are hidden. Nice. – Daniel Commented Mar 3, 2020 at 5:39
• @cycero - you can try manually update the starting number to 2 instead of 1. So, loop would be like for ( var i=2; i<=numCols; i++ ). I know it is too late to reply to you, but some can still find it useful. – Jay Commented Aug 10, 2021 at 1:46

Add a comment | 1

I created a version that maybe perform a little better than using a lot of CSS3 selectors in jQuery.

$(function () { var $table = $('#mytable'), $thead = $table.find('thead'), $tbody = $table.find('tbody'); var isEmpty = {}; $tbody.find('td').each(function () { var $this = $(this); if ( $this.text() == '' && isEmpty[ $this.index() ] != false ) { isEmpty[ $this.index() ] = true; } else { isEmpty[ $this.index() ] = false; } }); for (var x in isEmpty) { if ( isEmpty[x] ) { $thead.find('th').eq( x ).remove(); $tbody.find('td:nth-child(' + (parseInt(x, 10) + 1) + ')').remove(); } } }); Share Improve this answer Follow answered Jan 25, 2012 at 13:54 Eliseu Monar dos SantosEliseu Monar dos Santos 9421111 silver badges1313 bronze badges 1

• This did hide only 3 columns out of 6. – cycero Commented Jan 25, 2012 at 16:58

Add a comment | 0

I would recommend adding a class to each th and td (something like "col_1", "col_2" etc) and using $("td").children("span:empty") to find the columns that should be hidden.

Share Improve this answer Follow answered Jan 25, 2012 at 13:34 Grim...Grim... 16.9k77 gold badges4646 silver badges6161 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• jquery

or ask your own question.

• The Overflow Blog
• We'll Be In Touch - A New Podcast From Stack Overflow!
• The app that fights for your data privacy rights
• Featured on Meta
• More network sites to see advertising test
• We’re (finally!) going to the cloud!
• Call for testers for an early access release of a Stack Overflow extension...

Linked

3 How to hide the whole empty columns in php/html 1 Hide a column if its all fields are null in bootstrap-table?

Related

0 Hiding table rows if any of the two columns is empty 0 hide row if one of the columns is empty 3 Hide row if it contains empty columns 0 Show/hide table row if specific cell is empty 0 Hide table column when td rows are empty 1 How can I hide table column when all "td" in the column are empty? 1 Hide complete column if data is null or empty using jquery 2 Hide cell with jquery when empty ( no content) 0 Remove/ hide table row if all columns are empty 0 Check cells emptiness of a certain column, if all of them are, hide whole column

Hot Network Questions

• Is there a theorem in metaphysics that basically says, "Biting the bullet will be inevitable in any metaphysical theory?"
• Top loading an Aircraft vs bottom Loading
• Understanding Linux 'top' command: Memory vs Swap display format confusion
• Was it really possible to damage my VGA card by programming it in assembly through its latches registers?
• Do switches try to keep track of Ethernet group membership?
• Suggestion for catching a flight with short layover in Amsterdam
• What is it called when you have a hobby where you're good enough at to impress others but you yourself know you're only beginning?
• What is the Calvinist/Reformed solution to the Problem of Hell?
• Dantzig-Wolfe Decomposition for nurse Scheduling problem
• Biasing common-source NMOS with active load and fixed Vgs
• Why the second C in "recyceln" is pronounced [k] instead of [ts]?
• Did Superdana manufacture a 66 AC outlet power strip/surge protector?
• How to protect against fake gold bars?
• Boy who can see EM waves but loses the ability because of a thunderstorm
• Will Spirit trade with SAVEQ when it recovers?
• Advantages of information criteria over cross-validation
• What is the origin of the term "Dog Character" in the context of fighting games?
• Categories in which isomorphism of stalks does not imply isomorphism of sheaves
• What are the ethical considerations regarding mandatory class participation?
• Testing Puzzles for Puzzle Book: Enigmatic Puzzle
• How to draw this matrix with stairs and submatrices?
• Does the earliest known use of an "average" occur after the invention of calculus?
• How can I tell if commercial packaging is suitable for Sous Vide cooking?
• Can I protect my EV car charger's cable with aluminum tape and a stainless steel hose helix?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-js