Removing empty table rows using JavaScript when the page loads

Within my HTML table, I have noticed some empty cells and rows that need to be removed. To give an example of the code:

<table id="7">
<tr>
<td>Name</td>
<td>Type</td>
<td>Parent</td>
<td>Time</td>
</tr>
<tr>
<td>something1</td>
<td>something1</td>
<td>something1</td>
<td>something1</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>something3</td>
<td>something3</td>
<td>something3</td>
<td>something3</td>
</tr>

The issue lies in determining whether these cells are truly empty or if they contain hidden characters like tabs or new lines, as observed when opening the HTML file in a browser.

Although several JavaScript solutions have been found online, being a newcomer to Javascript has hindered my ability to customize them for my specific HTML structure.Findings thus far

Assistance from anyone experienced with Javascript would be greatly appreciated.

This is the current output (with text altered):

<table id="2">
<tr class="head_tbl">
<td class="head_inf">Type</td>
<td class="head_inf">Version</td>
<td class="head_inf">Build</td>
<td class="head_inf">Update</td>
<td class="head_inf">Patch</td>
<td class="head_inf">OS IP Address</td>
<td class="head_inf">Language</td>              
</tr>               
<tr class="body_tbl">
<td>SoemthingOS
</td>
<td>Something.version
</td>
<td>Something.build
</td>
<td>something.update
</td>
<td>something.patch
</td>
<td>something.ip
</td>
<td>something.language
</td>
</tr>
<tr class="body_tbl">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>

It appears that even though the cell is visibly empty, there may be a hidden newline character present within the output. This was evident during the creation of the script which displayed OS data in a tabular format, causing each piece of information to sit on a separate line as demonstrated below:

<table id="2">
<tr class="head_tbl">
<td class="head_inf">Type</td>
<td class="head_inf">Version</td>
<td class="head_inf">Build</td>
<td class="head_inf">Update</td>
<td class="head_inf">Patch</td>
<td class="head_inf">OS IP Address</td>
<td class="head_inf">Language</td>              
</tr>               
<tr class="body_tbl">
<td>$(var1)</td>
<td>$(var2)</td>
<td>$(var3)</td>
<td>$(var4)</td>
<td>$(var5)</td>
<td>$(var6)</td>
<td>$(var7)</td>
</tr>
<tr class="body_tbl">
<td>$(var8)</td>
<td>$(var9)</td>
<td>$(var10)</td>
<td>$(var11)</td>
<td>$(var12)</td>
<td>$(var13)</td>
<td>$(var14)</td>
</tr>

This script works as a shell script executed on ESXi, responsible for fetching OS details (referred to as $var1, $var2, etc.) and generating an HTML file containing this information within a structured table layout. In cases where no content is returned from a command tied to a variable, the assumption that it's empty is challenged by the existence of whitespace or newline characters instead.

javascripthtmlcss

Answer №1

If the table cells are truly empty, a simple selector and loop can be used

window.addEventListener('load', function() {
  var tds = document.querySelectorAll('table tr td:first-child:empty')
  tds.forEach(function (td) {
    td.parentNode.setAttribute('hidden', 'hidden')
  })
})
td {
  border: 1px dotted black;
}
<table id="7">
  <tr>
    <td>Name</td>
    <td>Type</td>
    <td>Parent</td>
    <td>Time</td>
  </tr>
  <tr>
    <td>something1</td>
    <td>something1</td>
    <td>something1</td>
    <td>something1</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>something3</td>
    <td>something3</td>
    <td>something3</td>
    <td>something3</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer №2

    td:empty {
        display: none;
    }
<table id="7">
<tr>
<td>Name</td>
<td>Type</td>
<td>Parent</td>
<td>Time</td>
</tr>
<tr>
<td>something1</td>
<td>something1</td>
<td>something1</td>
<td>something1</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>something3</td>
<td>something3</td>
<td>something3</td>
<td>something3</td>
</tr>

Answer №3

If you want to hide the parent tr if all its child td elements are empty, including whitespace characters, you can use the following code snippet. Feel free to give it a try and let me know if it meets your requirements.

const cells = document.querySelectorAll('table tr td')
cells.forEach((cell) => {
  cell.innerHTML.trim() === '' ? cell.parentNode.style.display = 'none' : ''
})
tr {
background:red;
}
<table>

  <tr>
    <td>Name</td>
    <td>Type</td>
    <td>Parent</td>
    <td>Time</td>
  </tr>
  <tr>
    <td>something1</td>
    <td>something1</td>
    <td>something1</td>
    <td>something1</td>
  </tr>
 <tr class="body_tbl">
<td>

</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
  <tr>
    <td>something3</td>
    <td>something3</td>
    <td>something3</td>
    <td>something3</td>
  </tr>

</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for implementing multi-language URL routing in a Node.js application

I am seeking guidance on how to handle routing for multi-language URLs in Node.js, Currently, I have the following routes set up where each language generates specific routes as shown below. However, with more than 5 languages, efficiency is becoming a co ...

javascriptnode.jsexpressroutesmiddleware

Apply a 2 pixel top border to an HTML table

Is there a way to add a double border at the headcell without using background images? Currently, I have a white color border top and want to add a grey color border on top of the white one. Is it possible to achieve something like #ccc and #fff for borde ...

htmlcss

Module Ionic not found

When I attempt to run the command "ionic info", an error is displayed: [ERROR] Error loading @ionic/react package.json: Error: Cannot find module '@ionic/react/package' Below is the output of my ionic info: C:\Users\MyPC>ionic i ...

javascriptreactjsionic-frameworknpm

The error message "TypeError: scanner.js is undefined and property 'scan' cannot be read" is occurring

I've been attempting to incorporate scanner-js into my react application, but I keep encountering the error TypeError: Cannot read property 'scan' of undefined. The code snippet is provided below: import { scanner } from 'scanner-js&ap ...

javascriptreactjs

In React Native, you can pass native component properties as props, while also defining custom ones using a TypeScript interface

I am working on a component called AppText where I need to utilize a Props interface and also be able to accept additional props that can be spread using the spread operator. However, I encountered this error: Type '{ children: string; accessible: tru ...

javascriptreactjstypescriptreact-native

Is there a way to retrieve values from two input fields using the onclick function?

In a div, I have added two input fields and an update button. Here's the code structure: <button type = "button" id = "add-botton" >Add Element </button> <div id = "trace-div1" class = "trace"> <h4><span>Trace 1& ...

javascriptphpjqueryhtml

Chart displaying an errant scrollbar at the bottom of the screen

Having trouble with a table that displays a scrollbar when a specific row is added. The first and second rows in the code below display correctly. However, adding the third row within the foreach loop causes a scrollbar to appear at the bottom. This issu ...

htmlcss

Elevate the Appearance of Material UI Elements with custom CSS Sty

I am currently facing an issue while trying to customize the styling of a Material UI component using CSS. Here is the code snippet: <IconButton className="my-class"> <Close /> </IconButton> CSS: .my-class { float: right ...

cssreactjstypescriptmaterial-ui

Automatically submitting a form in React.js based on certain conditions being met

Does anyone have experience with React login and register form buttons that trigger Redux actions? I'm facing an issue where both actions are being dispatched at the same time when certain conditions are met. Here is my code snippet: const LoginPage ...

javascriptreactjsredux

Error encountered while importing animation from 3ds Max to Collada format and then to Three.js: "Scaling exceeds limits"

After exporting a rigged and animated model to collada using the opencollada exporter from 3ds max, everything seems to load fine and the animation runs smoothly. However, with each loop of the animation, I encounter the following warning: THREE.Animation ...

javascriptthree.jscollada

No acknowledgment from command

Why doesn't the bot respond when I run this command? There are no errors. Do I have the role that matches in r.id? client.on('message', async message => { // Check if the user has a role with an id if(message.author.bot) return; ...

javascriptnode.jsdiscorddiscord.js

Access the reset button on a dynamic image using the document.getElementById method

I'm still new to coding in JavaScript and I have a question. In my class, I was required to assign four buttons to four different JavaScript commands. I managed to get three of them working successfully, but the last one seems to be giving me trouble. ...

javascripthtml

Dynamically resizing a property in the DOM with Angular

Could someone help me with an issue I'm having regarding resizing items on the screen in Angular when the browser window size changes? Here is my code snippet: // TS File height: number = 2.5; objHeight:number; screenHeight:number = window.innerHeig ...

htmlangulartypescriptdomwindow-resize

What is the most effective way to incorporate the Google Analytics script into a Django project?

Is it recommended to add the Google Analytics script directly in <script> tag and push it to GitHub, or should it be kept secret by adding it to the .env file and called in? When I attempted the second method, it appeared in the source page as is an ...

htmldjangogoogle-analytics

What is preventing me from making an inline call to res.json?

In my expressjs application, I encountered an issue with inlining a callback when using the res.json method to respond with a database document. While inlined calls to console.log worked fine, the program failed when I attempted the same approach with res. ...

javascriptnode.jsexpresspromise

Picture appears to be off-center

I created a loginPage.php file with the following content: <?php //some php stuff ?> <!DOCTYPE html> <html> <head> <title>Login Form Design</title> <link rel="stylesheet" type="text/css" href="stylelogin.c ...

phphtmlcss

Addressing memory leaks in React server-side rendering and Node.js with setInterval

Currently in my all-encompassing react application, there's a react element that has setInterval within componentWillMount and clearInterval inside componentWillUnmount. Luckily, componentWillUnmount is not invoked on the server. componentWillMount( ...

javascriptnode.jsreactjsexpressmemory-leaks

Guide to uploading multiple images to an Amazon AWS S3 bucket using Node.js, Angular, and JavaScript

Can anyone share insights on where and how E-commerce websites typically upload their product images? Has anyone had experience using Amazon AWS S3 bucket for this purpose? Additionally, does anyone know how to upload or retrieve multiple images at once ...

javascriptangularjsnode.jsamazon-web-services

Create two divs that have a width of 50%, forming perfect squares

Is there a way to create two div elements like these? Even if the gray area shrinks, the two div elements will remain visually consistent. While I can use box-sizing: border-box; and padding: 50% 0; in the red box, I need to include text in the blue b ...

htmlcss

When utilizing Blazor to create dynamic URLs within a loop, incorrect references may be generated

While working on a Blazor web assembly application, I encountered an issue when trying to loop over content to generate URLs for MP3 files. The media files are named "1.mp3", "2.mp3", "3.mp3", and so on. Imagine having a razor page with the following con ...

c#htmlrazorforeachblazor