: pusty selektor na TBODY tagu

Question

Biorąc poniższej tabeli:

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

jQuery następujące ocenić jako false:

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

Chciałbym użyć CSS, aby ustawić zawartość być wiadomość :

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

Czy selektor :empty można zastosować do tbody?

Answer 1

Nie, niestety, wcięcia i znaki nowej linii w zakresie tbody uniemożliwiają w tym przypadku dopasowanie się do :empty. Odnosi się to zarówno do CSS i jQuery, gdzie o ile mi wiadomo, :empty zachowuje się tak samo, jak i jQuery's :parent, co jest równoważne z :not(:empty) (z bardzo trudnym wyborem nazwy bardzo).

Co więcej, you cannot use CSS content to add elements to the DOM. Będziesz musiał to zrobić w jQuery lub po stronie serwera: sprawdź, czy tbody ma jakieś wiersze, a jeśli nie, dodaj ten wiersz.

Jeśli pójdziesz z jQuery, można użyć to:

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

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

Answer 2

W tym przypadku tbody zawiera spacje jako treści, więc nie będzie działać

:empty

: empty Pseudo-klasa reprezentuje żadnego elementu, który nie ma dzieci w wszystkich. Uwzględniane są tylko węzły elementów i tekst (w tym białe spacje). Komentarze lub instrukcje przetwarzania nie mają wpływu na to, czy element jest pusty, czy nie.

Również :content mogą być stosowane tylko z :before lub :after elementów pseudo

Właściwość zawartość CSS której użyto wcześniej i :: :: po pseudoelementów do wytworzenia materiałów w elemencie . Obiekty wstawione za pomocą właściwości content są anonimowymi elementami zamienionymi.

Answer 3

Jeśli chcesz użyć :empty wtedy trzeba dać składni TBODY jak jak:

<tbody></tbody> 

Jak masz zdefiniuj: empty nie sprawdzi, czy ma nową linię.

Zdefiniuj tbody, tak jak Ci powiedziałem. Można również użyć .html() sprawdzić warunek:

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

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

Answer 4

Zastosowanie

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

a następnie sprawdzić, co dostajesz.

Answer 5

Sprawdź to:

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

Answer 6

<tbody> nie jest pusta, ponieważ zawiera spacje. Będziesz musiał użyć funkcji filtrowania, aby ominąć, że:

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

Albo policzyć ilość dzieci:

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

Answer 7

FYI: Można użyć następującego selektora jQuery do wybrania tabeli z pusty tbody bez zależności od id elementu tabeli:

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