Búsqueda en una tabla con Jquery

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);
      });
  });

Autor: denz

Publicado: 28/07/2018

Compartir Elemento Web

Donar a Compositu
Otras formas de ayudar
  • Compártelo en tus redes sociales.
  • Recomienda los elementos.
  • Regístrate Aquí
  • Deja tu comentario agradeciendo el aporte.

Descarga el código completo del Elemento Web y archivos necesarios (imágenes, librerias, plugins, frameword, etc)

Deja tu comentario