How to hide a whole a
if table tag is is empty or null?

Question

Currently I am using thymeleaf as a view. I am trying to hide my div if all of my table tags are null or empty. If it is not empty then show the div that will show the table.

Simple Html :

<div id= "myTable1div">
   <h3> Test table </h3>

   <table id="Table1">
     <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
     </thead>
     <tbody>
       <tr th:each="data, iterStat : ${hostlist}">
         <td th:text = "${data.host}"></td>
         <td th:text = "${data.id}"></td> 
         <td th:text = "${data.number}"></td>
       </tr>
     </tbody>
   </table>
</div>

How can I write a javascript, css or Jquery if td is null hide this div? Basically this would show a table with a header. But if the tags are null it should be just a blank page. Showing nothing that is inside the tag.

Yes, but I'm confused by your markup because it seems you're only loading a single element in the table. So, are you wanting to not show the *row* if one element is completely null/empty or the div? — ChiefTwoPencils, Dec 05 '16 at 04:11
@ChiefTwoPencils I want the whole div tag to hide if values are null or blank — JayC, Dec 05 '16 at 04:49

Zakaria Acharki · Accepted Answer · 2016-12-05T09:21:27.947

2

You could check if one of td's are empty or null in the ready function using each() method then hide the div using hide() :

$(function(){
   var hide = true;

   $('#Table1 td').each(function(){
        var td_content = $(this).text();

        if(td_content!=""){
            hide = false;
        }
   })

   if(hide){
      $('#myTable1div').hide();
   }
})

Hope this helps.

Two empty td's case :

$(function(){
  var hide = true;

  $('#Table1 td').each(function(){
    var td_content = $(this).text();

    if(td_content!=""){
      hide = false;
    }
  })

  if(hide){
    $('#myTable1div').hide();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTable1div">
  <table id="Table1">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td></td>
      <td></td> 
      <td>number</td>
    </tr>
  </table>
</div>

All td's are empty case :

$(function(){
  var hide = true;

  $('#Table1 td').each(function(){
    var td_content = $(this).text();

    if(td_content!=""){
      hide = false;
    }
  })

  if(hide){
    $('#myTable1div').hide();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTable1div">
  <table id="Table1">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td></td>
      <td></td> 
      <td></td>
    </tr>
  </table>
</div>

edited Dec 05 '16 at 09:21

answered Dec 04 '16 at 22:55

Zakaria Acharki

66,747
15
75
101

Updated my answer so the table will be hidden _if all the td are null or empty._ – Zakaria Acharki Dec 05 '16 at 09:22
This code works but when I have a table row tag like which outputs nothing because status currently do not equal CRITICAL. This div tag does not disappear. – JayC Dec 05 '16 at 15:29
Could you please show me how it looks in the browser (PURE HTML), after the compilation. – Zakaria Acharki Dec 05 '16 at 15:34
Using pure HTML your method works. But when I have the thyme leaf tag to dynamically insert data into the table cells It does not work. It just does not hide the div tag. – JayC Dec 05 '16 at 15:37
Yes i see and i believe you.. i would just to see how the HTML look like after the compilation of 'thyme leaf' tags, (use inspector in your browser to get the `tr` that not disappear in you current code from active page) – Zakaria Acharki Dec 05 '16 at 15:42
added image of what I am doing and getting – JayC Dec 05 '16 at 15:52
So close.. i want to see the tbody part also in the inspector. – Zakaria Acharki Dec 05 '16 at 15:54
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/129815/discussion-between-jackie-and-zakaria-acharki). – JayC Dec 05 '16 at 15:57

score 1 · Answer 2 · answered Dec 04 '16 at 23:10

Although all the answers here would probably work, they are all tightly coupled (a simple html change will most like stop the javascript code from working as intended) and not reusable. I would recommend reading Decoupling Your HTML, CSS, and JavaScript - Philip Walton @ Google Engineer.

If I were to write this, it would probably look a little bit like:

<div id= "myTable1div" class="js-hide-onallempty">
  <table id="Table1">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td class="js-hide-onallempty-data">${data.host}</td>
      <td class="js-hide-onallempty-data">${data.id}</td> 
      <td class="js-hide-onallempty-data">${data.number}</td>
    </tr>
  </table>
</div>

jQuery:

$(document).ready(function(){
  $(".js-hide-onallempty").each(function(){
    var $hide = $(this);
    var isHidden = true;
    $hide.find('.js-hide-onallempty-data').each(function(){
      isHidden = $(this).text().trim().length == 0;
      return isHidden;  // if any element has text then this return false
                        // and breaks the loop
    });
    $hide.toggle(isHidden);
  });
});

score 0 · Answer 3 · edited Dec 04 '16 at 23:14

I see you are printing the variables ${data.host}. Why not check if ${data.host} is empty. if so do not display the table.

In jQuery this can be done as

if(typeof data.host === undefined || data.host === '' || data.host === null) 
    $("#Table1").hide();
else
    // display the table with the data

In vanilla js it can be done like this

if(typeof data.host === undefined || data.host === '' || data.host === null) 
    $(document.querySelector("#Table1")).style.display = "none";
else
    // display the table with the data

How to hide a whole a if table tag is is empty or null?

3 Answers3

How to hide a whole a
if table tag is is empty or null?