HTML
<div class="contenedor">
<input type="search" id="busqueda" placeholder="Buscar" title="Presione Esc para cancelar la búsqueda.">
<table id="tabla">
<thead>
<tr>
<td>Cod</td><td style="width:150px;">Producto</td><td>Presentación</td><td>Precio 2015</td><td>Precio 2016</td>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td><td>Cloro</td><td>1 litro</td><td>14.5</td><td>16.6</td>
</tr>
<tr>
<td>0002</td><td>Pañales medianos</td><td>48 unidades</td><td>95.2</td><td>153.16</td>
</tr>
<tr>
<td>0003</td><td>Lavaplatos</td><td>500cc</td><td>19.28</td><td>17.7</td>
</tr>
<tr>
<td>0004</td><td>Papel higénico</td><td>4 unidades</td><td>15.9</td><td>20.69</td>
</tr>
<tr>
<td>0005</td><td>Jabón panela</td><td>250grs</td><td>6.46</td><td>7.75</td>
</tr>
<tr>
<td>0006</td><td>Detergente</td><td>900grs</td><td>18.52</td><td>26.24</td>
</tr>
<tr>
<td>0007</td><td>Jabón de baño</td><td>130grs</td><td>6.73</td><td>9.93</td>
</tr>
<tr>
<td>0008</td><td>Desodorante</td><td>50grs</td><td>14.17</td><td>15.7</td>
</tr>
<tr>
<td>0009</td><td>Pañales grandes</td><td>30 unidades</td><td>45.17</td><td>48.7</td>
</tr>
<tr>
<td>0010</td><td>Cloro desinfectante</td><td>2 litro</td><td>28.12</td><td>29.9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
</tr>
</tfoot>
</table>
</div>CSS
.contenedor{
width:485px;
}
input{
width:100%;
display:block;
margin:7px 0px;
padding:7px;
}
table{
width:100%;
border-collapse:collapse;
font-family:sans-serif;
font-size:14px;
margin:0px;
}
table thead{
background:#cc6666;
color:#fff;
font-weight:bold;
}
table tbody{
background:#f1f1f1;
}
table tbody tr:hover{
background:#fab3b3;
}
table thead tr td,tbody tr td {
padding:14px;
}
table tfoot{
background:#996666;
}JS
$(function(){
jQuery.fn.tablaBusqueda=function(text){
var elem=$(this);
var cont=0;
elem.find('tbody tr').each(function(indiceFila,objFila){
var objCeldas=$(objFila).find('td');
if(objCeldas.length>0){
var textExiste=false;
objCeldas.each(function(indiceCelda,objCeldaFila){
objRegExp=new RegExp(RegExp.escape(text,'i'));
var cadTexto=$(objCeldaFila).text().toLowerCase();
if(objRegExp.test(cadTexto)){
textExiste=true;
cont++;
return false;
}
});
if(textExiste==true){
$(objFila).show();
}else{
$(objFila).hide();
}
}
});
}
RegExp.escape=function(text){
var strCaracteresEspeciales=new RegExp("[.*+?|()\\[\\]{}\\\\]", "g");
//devolvemos la cadena limpia
return text.replace(strCaracteresEspeciales, "\\$&");
};
});
$(document).ready(function(){
$("#busqueda").on("search",function(){
var text=$(this).val();
text=text.toLowerCase();
$("#tabla").tablaBusqueda(text);
});
});
Deja tu comentario