Wenn keine tr, verstecken Tabelle

Question

ich die Ausgabe dieser Tabelle:

<table class="table-example"> 
    <thead> 
    <tr> 
     <th scope="col">Location</th> 
     <th scope="col">Description</th> 
     <th scope="col">Status</th> 
     <th scope="col">Eta Fix</th> 
    </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

ich die gesamte Tabelle müssen nicht angezeigt werden, wenn die tbody leer ist, wie oben

auf diese mit Variationen Versuchte:

$(function(){ 
    if ($('.table-example > tbody').length == 0){ 
    $('.table-example).hide(); 
    } 
}); 

Was mache ich falsch?

Answer 1

Versuchen Sie folgendes:

$(function(){ 
 
    if ($(".table-example > tbody > tr").length == null || $(".table-example > tbody > tr").length == 0){ 
 
    $(".table-example").hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table-example"> 
 
    <thead> 
 
    <tr> 
 
    <th scope="col">Location</th> 
 
    <th scope="col">Description</th> 
 
    <th scope="col">Status</th> 
 
    <th scope="col">Eta Fix</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>

Answer 2

$(function() { 

    if ($('.table-example > tbody > tr').length == 0){ 
    $('.table-example').hide(); 
    } 

}); 

Sie können .table-example > tbody > tr verwenden und Sie vermissen 'in $('.table-example').hide();. Ich hoffe, es wird für Sie arbeiten.

Answer 3

Der Selektor $ ('. Table-example> tbody') gibt eine Länge von eins zurück, wenn überhaupt ein tbody-Tag in der Tabelle vorhanden ist. Stattdessen müssen Sie für alle Elemente innerhalb tbody überprüfen:

$(function(){ 
    if ($('.table-example tbody *').length == 0){ 
    $('.table-example).hide(); 
    } 
}); 

Answer 4

:has Selektor oder Verfahren zusammen mit :empty Selektor

$('.table-example').has('tbody:empty').hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table-example"> 
 
    <thead> 
 
    <tr> 
 
    <th scope="col">Location</th> 
 
    <th scope="col">Description</th> 
 
    <th scope="col">Status</th> 
 
    <th scope="col">Eta Fix</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>