Script para buscar palabras en una Tabla con Jquery

Este script es una variación del Script para buscar palabras en una lista html, lo que hacemos es ahora hacer que el scrip busque en una tabla.

colocar antes del cierra de </head>

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<style>
.resaltar{background-color:#FF0;}
</style> 
  <script type='text/javascript' >
    $.expr[':'].icontains = function(obj, index, meta, stack){
    return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
    };
    $(document).ready(function(){   
        $('#buscador').keyup(function(){
                     buscar = $(this).val();
                     $('#lista tr').removeClass('resaltar');
                            if(jQuery.trim(buscar) != ''){
                               $("#lista tr:icontains('" + buscar + "')").addClass('resaltar');
                            }
            });
    });   
 </script> 

Esta es la casilla de búsqueda:

<p>Buscar  »<input name="buscador" id="buscador" type="text" /></p>

Finalmente agregar el ID a la tabla así:

<table id="lista">

Ver Ejemplo

Y si deseas que solo se ilumine una celda, hacer la variación siguiente:

Ver ejemplo 2

Comentarios

Publicar un comentario

Entradas populares de este blog

Superponer una imagen sobre otra con CSS

¿Ganas dinero en Facebook con Página, Grupo, Comunidad, etc?

Script para buscar palabras o textos en una página (html) con Jquery