2011-07-11 52 views
5

Para la tabla siguiente, todas las celdas debajo de row2 (tr class = "row2") están vacías, cómo verificar la fila con celda vacía y solo ocultar (mostrar: ninguna) ¿eso?jQuery - Cómo ocultar una fila que contiene una celda vacía

Gracias

<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> 

Respuesta

5

Con el siguiente script jQuery va a recorrer todas las filas de la tabla, todas sus columnas y ver si alguno de ellos no está vacío.

Si ninguno de ellos no está vacío, ocultará la fila.

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

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

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

    }); 

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

}); 

Perdone, se supone que hay .html() no .val()

Aquí es un ejemplo jsFiddle: http://jsfiddle.net/dYkLg/

Aquí es una versión más corta de hecho, esto funciona por comprobar si la cantidad de columnas vacías es igual a la cantidad total de columnas dentro de esa fila que comprueba directamente si hay columnas no vacías en la fila actual:

Actualizado gracias a Tom Hubbard

Con la jsFiddle: http://jsfiddle.net/dYkLg/2/

+1

Si utiliza el selector: no() se puede comparar el tamaño a 0 y evitar la selección extra. –

+0

Tienes razón, actualizado. – Kokos

2

De esta manera se puede ocultar la fila2

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

lo siento, por favor, compruebe mi pregunta actualizada "... comprobar la fila con celda vacía y sólo ocultar (display: none) que ..." –

2

Si utiliza clases sólo para navegar con jQuery y no modifique sus alturas intente esto:

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

Algo así como (es decir para cada fila si no son cero td no vacío de entonces ocultarlo):

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

jsFiddle of it: http://jsfiddle.net/EmNey/ –

2

puede utilizar el selector de :empty para comprobar los valores vacíos

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

aquí es el violín de trabajo http://jsfiddle.net/JujHv/1/

+0

No necesita el 'each()' aquí, simplemente puede llamar a 'hide()' en el resultado del selector. EG: http://jsfiddle.net/jackfranklin/XbvPV/ –

+0

@Jack Franklin tnx para señalarlo actualizó la respuesta – Rafay

6

Hay al menos dos formas de hacerlo.

En primer lugar, si todos los <td> elementos están vacías, a continuación, el texto interior del elemento <tr> sólo constan de espacios en blanco, por lo que puede utilizar $.trim() con filter() y escribir:

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

También puede utilizar el :not(), :has() y :empty selectores para que coincida con explícitamente los <tr> elementos que sólo contienen vacíos <td> elementos:

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

Su segunda solución es muy elegante, lo recordaré. – Kokos

2

Antes que nada, le daría una identificación a su mesa (es decir"Mitabla")

A continuación, sólo tiene que hacer:

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

Esperanza ayudé. En general, el selector: empty devolverá elementos que no tienen nada en su interior (es decir, no hay elementos secundarios ni contenidos).

Saludos

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

modificado para comprobar si hay una celda sin texto, ya que nuestras salidas CMS etiquetas p vacíos para las células sin contenido.

$('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(); 
     }); 
Cuestiones relacionadas