Win a copy of Beginning Java 17 Fundamentals: Object-Oriented Programming in Java 17 this week in the Java in General forum!
  • 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:
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

Hiding empty columns in HTML table

 
Ranch Hand
Posts: 53
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Sheriff
Posts: 67620
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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....?

  •  
    Warren Griscti
    Ranch Hand
    Posts: 53
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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: 67620
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    So what does it mean then to "hide" a column? If the headers show all possible columns, then what's getting hidden?
     
    Warren Griscti
    Ranch Hand
    Posts: 53
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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: 67620
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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.
     
    With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
    reply
      Bookmark Topic Watch Topic
    • New Topic