1

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.

Zoltan Szabo
  • 77
  • 1
  • 7
  • Maybe you should look at this post: https://stackoverflow.com/questions/46813247/remove-empty-elements-from-dom – Martin M Aug 14 '18 at 12:15

3 Answers3

1

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>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • Hello. Thx for the quick response. Unfortunately it does not work. – Zoltan Szabo Aug 14 '18 at 12:42
  • @ZoltanSzabo it does not work is not enough feedback for me. Do you receive any errors ? where did you put that code ? did you check your console ? because as you can see in my example..it works. try to use it inside an `window.onload` event – Mihai T Aug 14 '18 at 13:08
  • Yes, your code is working perfectly. And i am amazed that it does not remove the table row from my html file. – Zoltan Szabo Aug 17 '18 at 12:55
  • However i managed to find out why that (i think). It could be that there is a new line or some withspace in that . – Zoltan Szabo Aug 17 '18 at 12:57
  • I edited my post..now it has more details, and actual output..please have a look. – Zoltan Szabo Aug 17 '18 at 13:19
  • @ZoltanSzabo i edited my code snippet with new lines inside `td` but it still works. Can it be some HTML inserted like `
    ` or non-breaking-space ` ` ? Guess not, because that should be visibile in the output     – Mihai T Aug 17 '18 at 13:27
1

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>
epascarello
  • 204,599
  • 20
  • 195
  • 236
1

    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>
Ryan
  • 7,499
  • 9
  • 52
  • 61
Fatih Erol
  • 633
  • 2
  • 8
  • 22
  • Question asked for JavaScript, but this answer provides a CSS rule instead. Looks like it might solve the problem for Zoltan though. – Ryan Aug 14 '18 at 13:28
  • @Ryan it doesn't hide the `tr`. it hides the `td` which are empty. So if a `tr` would have 3 `td` and not all 3 empty, the tr will still show. the op says ` My objective is to remove all the table rows with empty cells.` From that i understand that if there is an empty td inside a row, that row should be removed/hidden – Mihai T Aug 14 '18 at 14:48
  • @MihaiT - in the example Zoltan provides there are no rows with some empty cells and some not empty cells. Sounds like you are making the problem more complicated than it has to be. Let's let Zoltan clarify. If he indeed is only concerned with completely empty rows then the CSS solution probably is the best. – Ryan Aug 14 '18 at 16:34
  • @Ryan maybe i 'overcomplicated' it , but this solution doesn't hide/remove the `tr`s. It hides the `td`s – Mihai T Aug 14 '18 at 17:16
  • @MihaiT - I've converted the answer to a code snippet to show that it works great on the example input given. I agree that undisclosed factors could make this solution non-optimal - for example if the table rows are styled then hiding the rows implicitly by collapsing the cells inside might no longer work well as you would see styled collapsed rows. However, given the input provided by Zoltan this solution works great. – Ryan Aug 14 '18 at 17:29
  • Thank you guys for the quick response. Yes, it would better if the would be hidden or removed. However i edited my post with new information...please have a look. – Zoltan Szabo Aug 17 '18 at 13:21