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
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
Excelente, muchísimas gracias!
ResponderEliminarMuy buen codigo amigo sirve de mucho....
ResponderEliminarsolo me busca una columna si y otra no :/
ResponderEliminarExcelente.. gracias.
ResponderEliminarMuchas gracias, pero donde esta el ejemplo 2?
ResponderEliminar