2012-08-06 15 views
5

Tengo que filtrar una tabla html. Para hacerlo, creé una devolución de llamada para todos los elementos tr y compruebo si uno de los tr-children contiene algún patrón específico.Prueba si los niños contienen texto específico con jQuery

$("#filter").keypress(function() { 
    var filter = $(this).val(); 

    $("#table1 tr[data-config]").each(function(){ 

     var val = $(this).find(":contains('" + filter + "')"); 

     if(val.length > 0){ 
      $(this).css("display","table-row"); 
     }else{ 
      $(this).css("display","none"); 
     } 
    }); 
}); 

Funciona, pero ¿hay una función para probar si un elemento contiene algo de texto?

Por el momento recupero una lista de todos los elementos que contienen el patrón y cuento si es mayor que cero. ¿Hay una función jQuery que comprueba si este patrón ocurre y devuelve un booleano? La tabla puede contener muchas filas y, por lo tanto, quiero la menor sobrecarga posible.

+0

Hola, NaN, si quieres publicar una respuesta, haz ping y eliminaré la mía (marcada como wiki de la comunidad). De lo contrario, marque este comentario como obsoleto. ¡Gracias! – brasofilo

Respuesta

4
///// replace these lines... 
// var val = $(this).find(":contains('" + filter + "')"); 
// if(val.length > 0){ 

///// with this line 
if($(this).text().match(filter)){ 

Esto funciona mediante la conversión de todo el contenido de fila en una cadena de texto, a continuación, utilizando la función de comparación de cadena sencilla de comprobar si el filtro está contenido dentro del texto (y por lo tanto la fila)

0

Cuando el filtro está caso sensibles, esto es cómo hacer que sea insensible:

.match("/pattern/i"); 

apoyos a Billy!

0

Las respuestas son buenas, pero hay una forma más fácil usando: contiene

En general, hacer esto:

$(".class:contains('texttofind')").css("display", "none"); 

Con el ejemplo específico anterior, hacer esto:

$("#table1 tr[data-config]:contains('" + filter + "')").css("display","table-row"); 

Puede encontrar más información aquí: https://api.jquery.com/contains-selector/

Esto evita tener que repetir con .each o .find.

Cuestiones relacionadas