: leer Selektor auf tbody-Tag

Question

die folgende Tabelle angegeben:

<table id="incidents"> 
    <thead> 
     <tr> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

jQuery mit dem folgenden bewerten als false:

$("#incidents tbody").is(":empty") 

ich CSS verwenden möchte, den Inhalt zu setzen eine Nachricht zu sein :

#incidents tbody:empty { 
    content: "<tr>message foo</tr>"; 
} 

Kann die :empty Wähler auf tBODY angewendet werden?

Answer 1

Nein, leider ist die Vertiefung und Zeilenumbrüche innerhalb tbody verhindern, dass es jemals :empty in diesem Fall übereinstimmen. Dies gilt sowohl für CSS als auch für jQuery, wobei sich meines Wissens identisch verhält, sowie jQuerys :parent, was :not(:empty) (mit sehr schlechter Namenswahl) entspricht.

Darüber hinaus you cannot use CSS content to add elements to the DOM. Sie müssen dies in jQuery oder auf der Serverseite tun: Überprüfen Sie, ob tbody Zeilen enthält, und fügen Sie andernfalls diese Zeile hinzu.

Wenn Sie mit jQuery gehen, können Sie diese verwenden:

var tbody = $("#incidents tbody"); 

if (tbody.children().length == 0) { 
    tbody.html("<tr>message foo</tr>"); 
} 

Answer 2

In diesem Fall tbody Leerraum enthält als Inhalt, so wird es nicht funktionieren

:empty

Die: leere Pseudo-Klasse steht für ein beliebiges Element, das keine Kinder alles hat. Nur Elementknoten und Text (einschließlich Leerzeichen) werden berücksichtigt. Kommentare oder Verarbeitungsanweisungen haben keinen Einfluss darauf, ob ein Element als leer angesehen wird oder nicht.

Auch die :content kann nur mit :before oder :after Pseudoelemente

Der Inhalt CSS Eigenschaft wird mit der verwendeten verwendet werden :: :: vor und nach pseudo-Elemente-Gehalt in einem Element zu erzeugen, . Objekte, die mit der Inhaltseigenschaft eingefügt wurden, sind anonyme Ersetzungselemente.

Answer 3

Wenn Sie die :empty verwenden möchten, dann müssen Sie wie wie die tbody Syntax geben:

<tbody></tbody> 

Wie Sie haben define the: empty überprüft das nicht, da es eine neue Zeile hat.

Definieren Sie die tbody wie ich Ihnen gesagt habe. Sie können auch die .html() verwenden, um die Bedingung zu überprüfen:

if(!$("#incidents tbody").html()) {} 

Referenz: How do I check if an HTML element is empty using jQuery?

Answer 4

Verwenden

$("#incidents tbody").html() 

und dann überprüfen, was Sie erhalten.

Answer 5

für diesen:

<table id="incidents"> 
    <thead> 
     <tr> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

Answer 6

Die <tbody> nicht leer ist, wie es Leerzeichen enthält. Sie werden eine Filterfunktion zu umgehen, dass verwenden müssen:

$("#incidents tbody").filter(function() { 
    return !$.trim($(this).text()); 
}).append('<tr>message foo</tr>'); 

Oder die Zahl der Kinder zählen:

$("#incidents tbody").filter(function() { 
    return !$(this).children().length; 
}).append('<tr>message foo</tr>'); 

Answer 7

Zur Info: Sie haben den folgenden jQuery-Selektor verwenden, um eine Tabelle mit einer Auswahl leer tbody ohne von der ID des Tabellenelements abhängig:

$("table:not(:has(>tbody>tr))")