CODEWITHSUNDEEP
javascripthtmlcss
Zoltan Szabo
Zoltan Szabo

Reputation: 77

JavaScript on page load removal of empty table rows

So i have this html table that has empty cells and empty rows. My objective is to remove all the table rows with empty cells. Example of html 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>

Unfortunately the table is computer generated, and i am not sure if it is empty, or maybe it has some whitespace like a tab or new line..all i see is an empty cell or empty cells when i open the html file in a browser.

I have found a few javascript codes, but since i am a newb at javascript i am unable to modifiy it to work for my html code.what i found so far

Could anyone please help me out?

Here is the actual output (with changed text):

<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>
<td>
</td>
</tr>

So yes..i think there is a new line when the output is made, even if there is a no actual ouput in the td. I say that because when the script was made to get the OS output in a table it was like this:

<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>

And when the output is made the end-td is on a new line. To clarify even more about the script. Esentially it is a shell script, that is run on a ESXi, that takes the OS information ($var1, $var2, etc) and creates an html file that has a table and the os information...amongst other things. When there is no output from the command used on lets say $var1, it gives an "empty" variable. But my guess is that is not empty, it has a new line or white space.

Upvotes: 1

Views: 485

Answers (3)

Mihai T
Mihai T

Reputation: 17687

You can get all the td and see if they are empty, and if so, hide the tr parent.

TO check if the td are empty ( including if they have whitespace ) you should use trim() to remove all the whitespaces before checking.

Check code below, let me know if this works for you

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>

Upvotes: 1

Fatih Erol
Fatih Erol

Reputation: 699

    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>

Upvotes: 1

epascarello
epascarello

Reputation: 207511

If the tds are truely empty, it is a simple selector and loop

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>

Upvotes: 1

Related Questions