Hide table, when tbody missing

Question

My program generate tables, some with tbody, some without tbody:

table {
  border: 1px solid black;
  margin: 0 0 20px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Is there any way by which the table isn't displayed if the tbody is missing? (as in the third table)

Not reliably, because most browsers will insert a `` if it's omitted (despite the `` being an optional element); which means you have to parse the HTML with regex: and you should (probably) [never parse HTML with regex](http://stackoverflow.com/a/1732454/82548). But looking at your question more closely, you seem to mean "...if the `tbody` is *empty*" rather than 'missing'? — David Thomas, Feb 10 '15 at 12:14

score 1 · Accepted Answer · answered Feb 10 '15 at 12:11

Could try to browse all table and check if the tbody of that table is empty:

$("table").each(function(i,v){
   if($(this).find("tbody").html().trim().length === 0){
       $(this).hide()
   }
})

table {
  border: 1px solid black;
  margin: 0 0 20px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

score 1 · Answer 2 · answered Feb 10 '15 at 12:13

1

try this. Check for each table if the tbody has children elements.

$("table").each(function(){
   if($(this + "tbody").children().length == 0){
       $(this).parent().hide();
   }
})

answered Feb 10 '15 at 12:13

user2232273

4,898
15
49
75

score 1 · Answer 3 · answered Feb 10 '15 at 12:14

1

You can try checking if the tbody is empty

$("table").each(function(i,v){
   if($(this).find("tbody").children().length){
       $(this).parent().hide();
   }
})

answered Feb 10 '15 at 12:14

chridam

100,957
23
236
235

score 1 · Answer 4 · answered Feb 10 '15 at 12:20

1

You can use jQuery.filter function to locate all tables that have empty tbody, and hide them:

$("table").filter(function(){
    return $(this).find("tbody > *").length === 0;
}).hide();

answered Feb 10 '15 at 12:20

Salman A

262,204
82
430
521

Praxis Ashelin · Answer 5 · 2015-02-10T12:59:09.687

1

You can do this with the .has() function.

First hide all tables:

$("table").hide();

Then show only the ones that have a tbody:

$("table").has("tbody").show();

Or if the tbody has cells (not empty):

$("table").has("tbody td").show();

JSFiddle demo

edited Feb 10 '15 at 12:59

answered Feb 10 '15 at 12:52

Praxis Ashelin

5,137
2
20
46

score 0 · Answer 6 · answered Feb 10 '15 at 12:12

If only using html and css and you don't want to show non filled tables just delete the third table from your html code or add this to your third table

<table style="display:none">
...
</table>

EDIT: If you are using Javascript of Php, JSTL you can modify your view to hide tables

Hide table, when tbody missing

6 Answers6