Filtrar itens de uma tabela HTML com javascript
Autor: Unknown | Publicado: 2014-05-02T10:22:00-07:00


Este
tipo de filtro é bem bacana para aquelas situações em que se tem
uma tabela HTML povoada e precisa-se encontrar determinado registro
rapidamente. A figura 1 ilustra o funcionamento. A ideia é basicamente: a medida em que o usuário digita o termo da consulta, a tabela html é automaticamente filtrada, mostrando apenas as linhas &lt;tr&gt; que contém o termo da pesquisa.









Figura
1. Visão do exemplo rodando.







A
estrutura de arquivos deste exemplo é a seguinte:

estilos.css

filtro.js
   (exemplos catados da net)

jquery.js
(é o jquery padrão, se tiver desenvolvendo em web2py ele está em
static/js)

index.html



estilos.css ------------------------------------------------------

h1 {font-size:1.50em}

body {
 background-color: #fff;
 font-family: arial;
 font-size: 14px;
}
.tabela {
 margin:0px;
 padding:0px;
 width:100%;
 box-shadow: 5px 5px 5px #888888;
 border:1px solid #b2b2b2;
 }
.tabela_topo{
 background-color:#0084c6;
 border:1px solid #b2b2b2;
 border-width:0px 0px 1px 1px;
 text-align:center;
 font-size:14px;
 font-family:Arial;
 font-weight:bold;
 color:#ffffff;
 }




filtro.js ------------------------------------------------------
/*Efeito zebra na tabela*/
var oldColor = '#fff';
jQuery(document).ready(function() { 
 $('.zebra:even').css('background-color', '#E9E9E9');//faz o efeito da zebra nas linhas
 /*efeito hover ao passar pela linha*/
 $('.zebra').hover(function(){
  oldColor = $(this).css('background-color');
  $(this).attr('oldColor',oldColor); //Atributo para funcionar em todos os navegadores
  $(this).css('background-color', '#81b9da'); //seta a cor do mouseover da linha
 },function(){
  $(this).css('background-color', $(this).attr('oldColor')); //restaura cor original na saida do evento
 });
});
/*Filtro*/
$(function(){
 $(".input-search").keyup(function(){
  //pega o css da tabela em que será feito o filtro 
  var tabela = $(this).attr('alt');
  if( $(this).val() != ""){
   $("."+tabela+" tbody&gt;tr").hide();
   $("."+tabela+" td:contains-ci('" + $(this).val() + "')").parent("tr").show();
  } else{
   $("."+tabela+" tbody&gt;tr").show();
  }
 }); 
});
$.extend($.expr[":"], {
 "contains-ci": function(elem, i, match, array) {
  return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) &gt;= 0;
 }
});
index.html ------------------------------------------------------
&lt;!DOCTYPE html&gt;
&lt;head&gt;
 &lt;meta charset="utf-8" /&gt;
 &lt;link href="estilos.css" rel="stylesheet" type="text/css" /&gt;
 &lt;script src="jquery.js"&gt;&lt;/script&gt;
 &lt;script src="filtro.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;table width="100%"&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;h1&gt;Contatos&lt;/h4&gt;&lt;/td&gt;
   &lt;td&gt;&lt;div align='right'&gt;&lt;input type="text" class="input-search" alt="tabela" placeholder="Buscar nesta lista" /&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/table&gt;
 
 &lt;table class="tabela"&gt;
  &lt;thead&gt; 
   &lt;tr class="tabela_topo"&gt;
    &lt;td&gt;&lt;b&gt;Nome&lt;/b&gt;&lt;/td&gt;
    &lt;td&gt;&lt;b&gt;Fone&lt;/b&gt;&lt;/td&gt;
    &lt;td&gt;&lt;b&gt;E-mail&lt;/b&gt;&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
   &lt;tr class="zebra"&gt;
    &lt;td&gt;João da Silva&lt;/td&gt;
    &lt;td&gt;9900-1122&lt;/td&gt;
    &lt;td&gt;joao@dasilva.com&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr class="zebra"&gt;
    &lt;td&gt;Maria da Costa&lt;/td&gt;
    &lt;td&gt;9911-2233&lt;/td&gt;
    &lt;td&gt;maria@dacosta.com&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr class="zebra"&gt;
    &lt;td&gt;Pedro dos Santos&lt;/td&gt;
    &lt;td&gt;9922-3344&lt;/td&gt;
    &lt;td&gt;pedro@dossantos.com&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr class="zebra"&gt;
    &lt;td&gt;José Paulo&lt;/td&gt;
    &lt;td&gt;9933-4455&lt;/td&gt;
    &lt;td&gt;jose@paulo.com&lt;/td&gt;
   &lt;/tr&gt; 
  &lt;/tbody&gt; 
 &lt;/table&gt;
&lt;/body&gt;