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

4 comentarios:

Ultimos temas en Soluciones para Webmasters: