2011-07-11 13 views
5

Dla poniższej tabeli, cała komórka w wierszu 2 (tr class = "row2") jest pusta, jak sprawdzić wiersz z pustą komórką i tylko ukryć (wyświetlanie: brak) to?jQuery - Jak ukryć wiersz zawierający pustą komórkę

Dzięki

<table> 
<tr class="row1"> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
</tr> 
<tr class="row2"> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
... 
<tr class="row100"> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
</tr> 
</table> 

Odpowiedz

5

z następującym skryptem jQuery będzie pętli wszystkich wierszy tabeli, należy sprawdzić wszystkie swoje colums i sprawdzić, czy któryś z nich nie jest pusty.

Jeśli żadna z nich nie jest pusta, ukryje wiersz.

$('table tr').each(function(){ 

    var hide = true; 
    $('td',this).each(function(){ 

     if($(this).html() != '') 
      hide = false; 

    }); 

    if(hide) 
     $(this).hide(); 

}); 

Przepraszam, to ma być .html() nie .val()

Oto jsfiddle przykład: http://jsfiddle.net/dYkLg/

Oto krótsza wersja faktycznie to działa przez sprawdzenie czy ilość pustych colums jest równa całkowitej liczbie kolumn w tym wierszu bezpośrednio sprawdzając, czy w bieżącym wierszu są jakieś niepuste kolumny:

$('table tr').each(function(){ 

    if(!$('td:not(:empty)',this).length) 
     $(this).hide(); 

}); 

Zaktualizowane dzięki Tom Hubbard

Z jsfiddle: http://jsfiddle.net/dYkLg/2/

+1

Jeśli używasz: not (selektor) można porównać rozmiar do 0 i uniknij dodatkowego wyboru. –

+0

Masz rację, aktualizacja. – Kokos

2

W ten sposób można ukryć Wiersz2

$('.row2').hide(); 
+0

przykro, proszę sprawdzić moje zaktualizowaną pytanie „... dajcie wiersz z pustej komórki i tylko ukryty (display: none) to ...” –

2

Jeśli używasz klas tylko do nawigacji z jQuery i nie zmieniają ich wysokości spróbuj tego:

$("tr").each(function(index) 
{ 
    if ($(this).height() == 0) 
     $(this).hide(); 
}); 
2

Coś (to znaczy dla każdego wiersza, jeśli nie jest to zero niepusty td ówczesny ukryć):

$("tr").each(function(){ 
     var JsThis = $(this); 
     if($("td:not(:empty)",JsThis).size() === 0){ 
      JsThis.hide(); 
     } 
     }); 
+0

jsFiddle to: http://jsfiddle.net/EmNey/ –

2

można użyć przełącznika :empty sprawdzić pustych wartości

$("tr td:empty").hide(); 

oto skrzypce roboczego http://jsfiddle.net/JujHv/1/

+0

Nie potrzebujesz 'each()' tutaj, możesz po prostu wywołać 'hide()' w wyniku selektora. EG: http://jsfiddle.net/jackfranklin/XbvPV/ –

+0

@Jack Franklin tnx za wskazanie zaktualizowanej odpowiedzi – Rafay

6

Istnieją co najmniej dwa sposoby, aby to zrobić.

Po pierwsze, jeśli wszystkie <td> elementy są puste, wtedy wewnętrzna tekst elementu <tr> będzie składać się wyłącznie z białych znaków, dzięki czemu można używać $.trim() z filter() i napisać:

$("tr").filter(function() { 
    return $.trim($(this).text()) == ""; 
}).hide(); 

Można również użyć :not(), :has() i :empty selektorów jednoznacznie dopasować elementy <tr>, które zawierają tylko puste <td> elementy:

$("tr").not(":has(td:not(:empty))").hide(); 
+0

Twoje drugie rozwiązanie jest bardzo eleganckie, zapamiętam to. – Kokos

2

Przede wszystkim dałbym twojemu stolikowi identyfikator (tj."Mojatabela")

Wtedy po prostu trzeba zrobić:

$("#mytable td:empty").hide(); 

nadzieję, że pomogło. Ogólnie: pusty selektor zwróci elementy, które nie zawierają niczego w sobie (tzn. Bez elementów potomnych i zawartości).

Pozdrowienia

1

http://jsfiddle.net/hMb2q/

$('table tr').each(function(){ 

    var tr = $(this); 
    var tdNumber = tr.find('td').length; 
    var counter = 0; 

    tr.find('td').each(function() { 
     if ($(this).html() == '') counter++; 
    }); 

    if (counter == tdNumber) tr.remove(); 
}); 
0

Modified by sprawdzić na komórce bez tekstu, jak nasze wyjść CMS pustych tagów p dla komórek bez zawartości.

$('table tr').each(function(){ 
      var tr = $(this); 
      var tdNumber = tr.find('td').length; 
      var counter = 0; 

      tr.find('td').each(function() { 
       if ($(this).text().trim() == "") counter++; 
      }); 

      if (counter == tdNumber) tr.remove(); 
     }); 
Powiązane problemy