Hiding Empty Columns In HTML Table - CodeRanch

• Post Reply Bookmark Topic Watch Topic
• New Topic

programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums this forum made possible by our volunteer staff, including ... Marshals:

• Campbell Ritchie
• Jeanne Boyarsky
• Ron McLeod
• Paul Clapham
• Liutauras Vilda

Sheriffs:

• paul wheaton
• Rob Spoor
• Devaka Cooray

Saloon Keepers:

• Stephan van Hulst
• Tim Holloway
• Carey Brown
• Frits Walraven
• Tim Moores

Bartenders:

• Mikalai Zaikin

Forum:

• HTML Pages with CSS and JavaScript

Hiding empty columns in HTML table Warren Griscti Ranch Hand Posts: 53 posted 2 years ago

• 
• Number of slices to send: Optional 'thank-you' note: Send
• 
• 

Hi everyone I need some help or guidance re how to hide empty columns when displaying them in an HTML table. I'm using Node.js and I'm reading data from a mysql database. Is it possible to hide empty columns using javascript when displaying it in the browser. Bear Bibeault Sheriff Posts: 67750 173 I like... posted 2 years ago

• 
• Number of slices to send: Optional 'thank-you' note: Send
• 
• 

The use of NodeJS and MySQL in the backend seems irrelevant to the question, so let's focus on the display table itself:

What constitutes an "empty column"? One where every row has no data? Or is it on a per-row basis? Or... ?

How is the HTML table being built from the data? DOM manipulation? React? jQuery? Or....?

[Asking smart questions] [About Bear] [Books by Bear]

Warren Griscti Ranch Hand Posts: 53 posted 2 years ago

• 
• Number of slices to send: Optional 'thank-you' note: Send
• 
• 

It's a per row basis because it might be filled or it might not depending on the item. I created the headers and the data being read from mysql is then displayed under its respective header Bear Bibeault Sheriff Posts: 67750 173 I like... posted 2 years ago

• 
• Number of slices to send: Optional 'thank-you' note: Send
• 
• 

So what does it mean then to "hide" a column? If the headers show all possible columns, then what's getting hidden?

[Asking smart questions] [About Bear] [Books by Bear]

Warren Griscti Ranch Hand Posts: 53 posted 2 years ago

• 
• Number of slices to send: Optional 'thank-you' note: Send
• 
• 

The user is presented with a list of all items in the database. The list only displays the id and the name and a show more button is displayed beside each item and when the user presses the show more button of a single item another form showing all fields is displayed. Ex: Id,name, status, …., …. Etc.. as I’m fetching the data by the id from mysql all fields including the empty ones are displayed. I need to hide the empty column to that specific item. Bear Bibeault Sheriff Posts: 67750 173 I like... posted 2 years ago

• 
• Number of slices to send: Optional 'thank-you' note: Send
• 
• 

OK, so your "table" for each item really only contains a header row and a single row for the item info, correct? Which begs the question you didn't answer yet: how are you creating the HTML from the item data? It seems a simple matter of not creating the <th> and <td> elements for the columns that have no data, but the specifics depend on what you're using.

[Asking smart questions] [About Bear] [Books by Bear]

reply reply

Bookmark Topic Watch Topic
• New Topic

Boost this thread! Similar Threads

• Passing Null Value to Sql database from node.js
• Optimizing a database
• Urgent pls Help!!!
• how to use javascript and scrptlet simultaneously
• Problem with using a <sql:query> JSTL Tag when retrieving using JOIN

More...