Publicado em 6 de jun.

Filtro dinâmico

Divirtão-se...

http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Filtro</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  <script type="text/javascript">    function filter (phrase, _id, cellNr){  var suche = phrase.value.toLowerCase();  var table = document.getElementById(_id);  var ele;  for (var r = 1; r < table.rows.length; r++){  	ele = table.rows[r].cells[cellNr].innerHTML.replace(/<[^>]+>/g,"");  	if (ele.toLowerCase().indexOf(suche)>=0 )    table.rows[r].style.display = '';  	else table.rows[r].style.display = 'none';  }	}  </script></head><body><table width="100%" border="0">  <tr>    <td width="301"><input name="filt" type="text" onKeyUp="filter(this, 'lista', '0')"></td>    <td width="100"><input name="filt2" type="text" onKeyUp="filter(this, 'lista', '1')"></td>    <td width="135"><input name="filt3" type="text" onKeyUp="filter(this, 'lista', '2')"></td>    <td width="146"><input name="filt4" type="text" onKeyUp="filter(this, 'lista', '3')"></td>    <td width="48"><input name="filt5" type="text" onKeyUp="filter(this, 'lista', '4')"></td>  </tr></table><form>      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="lista">      <tr valign="middle">        <td width="301"></td>        <td width="100"></td>        <td width="135"></td>        <td width="146"></td>        <td width="48"></td>      </tr>      <tr>        <td>ALESSANDRA SILVA</td>        <td>Funcionário</td>        <td>MECÂNICA</td>        <td>DESENHISTA PROJETISTA MECÂNICO</td>        <td>Ativo</td>      </tr>      <tr>        <td>ALEXSANDRO</td>        <td>Consultor</td>        <td>MECÂNICA</td>        <td>DESENHISTA</td>        <td>Ativo</td>      </tr>      <tr>        <td>AMARILDO LUIZ</td>        <td>Funcionário</td>        <td>INDUSTRIAL</td>        <td>AUXILIAR SERVIçOS GERAIS</td>        <td>Ativo</td>      </tr>      <tr>        <td>ALDRIN ROSA</td>        <td>Estagiário</td>        <td>E&I </td>        <td>ESTAGIáRIO</td>        <td>Inativo</td>      </tr>      <tr>        <td>ALINE CAMILA</td>        <td>Consultor</td>        <td>ADMINISTRATIVO</td>        <td>TÉCNICO EM INFORMÁTICA</td>        <td>Inativo</td>      </tr>      <tr>        <td>SANDRO MANGOLO</td>        <td>Terceirizado</td>        <td>INDUSTRIAL</td>        <td>AUXILIAR SERVIçOS GERAIS</td>        <td>Inativo</td>      </tr>      <tr>        <td>WILLIAN MARCOS</td>        <td>Estagiário</td>        <td>MECÂNICA</td>        <td>ESTAGIáRIO</td>        <td>Inativo</td>      </tr>    </table></form>  </body></html>

Discussão (15)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Crystian· 7 de jun.

Muito Bom, só faltaria você manter a pesquisa, dessa forma para vários registros você poder colocar dois ou mais critérios de pesquisa.Abraço

ewise· 7 de jun.

Nossa!!! Excelente!!! Muito bom!!!

Mr Crowley· 8 de jun.

muito bom mesmo esse scriptvai me ajudar em muita coisas...hehehe outra...qdo você muda de campo como nome para funcionario, ele disconsidera o outro campo e considera o campo atula que você esta modificando o valorexiste um modo dele considerar todos so mesmo tempo?desculpa abusar da boa vontade, mais eu nao entendo de java script, apenas o basico do basico....mais desde ja obrigado e ate mais a todos...falow.....

alicacwb· 12 de jun.

bem, agora cada um modifica do jeito que precisa ;)

alias, fica de desafio pra vcs, mudar esse script pra considerar mais que um parametro de pesquisa!! heauehauhea vamo v quem acaba primeiro! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

http://forum.imasters.com.br/public/style_emoticons/default/kiss.gif http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

Wagner Santos· 4 de jul.

Divirtão-se...

hehehe... 'divirtam-se' http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif mas aí... muuuito bom o código viu! muito útil e muito prático... gostei pra caramba :) valeu por compartilhar conosco http://forum.imasters.com.br/public/style_emoticons/default/joia.gif abraços!!

hifi· 15 de jul.

ta ai então.. com mais de um parametro de pesquisa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Filtro</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> function filter (_id){	var _naw;	var disp;	var table = document.getElementById(_id);	var ele; for (var r = 1; r < table.rows.length; r++) {  disp="";  for (i=0; i<=4; i++) {  if(eval("document.form.filt"+i+".value").toLowerCase()!="") {    ele = table.rows[r].cells[i].innerHTML.replace(/<[^>]+>/g,"");    if (ele.toLowerCase().indexOf(document.getElementById("filt"+i).value.toLowerCase())==-1) {    disp="none";    }  }  }  table.rows[r].style.display = disp;	}} </script></head><body><form name="form"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="lista"> <tr>   <td width="301"><input name="filt0" type="text" onKeyUp="filter('lista')"></td>   <td width="100"><input name="filt1" type="text" onKeyUp="filter('lista')"></td>   <td width="135"><input name="filt2" type="text" onKeyUp="filter('lista')"></td>   <td width="146"><input name="filt3" type="text" onKeyUp="filter('lista')"></td>   <td width="48"><input name="filt4" type="text" onKeyUp="filter('lista')"></td> </tr>     <tr valign="middle">       <td width="301"></td>       <td width="100"></td>       <td width="135"></td>       <td width="146"></td>       <td width="48"></td>     </tr>     <tr>       <td>ALESSANDRA SILVA</td>       <td>Funcionário</td>       <td>MECÂNICA</td>       <td>DESENHISTA PROJETISTA MECÂNICO</td>       <td>Ativo</td>     </tr>     <tr>       <td>ALEXSANDRO</td>       <td>Consultor</td>       <td>MECÂNICA</td>       <td>DESENHISTA</td>       <td>Ativo</td>     </tr>     <tr>       <td>AMARILDO LUIZ</td>       <td>Funcionário</td>       <td>INDUSTRIAL</td>       <td>AUXILIAR SERVIçOS GERAIS</td>       <td>Ativo</td>     </tr>     <tr>       <td>ALDRIN ROSA</td>       <td>Estagiário</td>       <td>E&I </td>       <td>ESTAGIáRIO</td>       <td>Inativo</td>     </tr>     <tr>       <td>ALINE CAMILA</td>       <td>Consultor</td>       <td>ADMINISTRATIVO</td>       <td>TÉCNICO EM INFORMÁTICA</td>       <td>Inativo</td>     </tr>     <tr>       <td>SANDRO MANGOLO</td>       <td>Terceirizado</td>       <td>INDUSTRIAL</td>       <td>AUXILIAR SERVIçOS GERAIS</td>       <td>Inativo</td>     </tr>     <tr>       <td>WILLIAN MARCOS</td>       <td>Estagiário</td>       <td>MECÂNICA</td>       <td>ESTAGIáRIO</td>       <td>Inativo</td>     </tr>   </table></form>  </body></html>

wmssuper· 3 de ago.

Nossa, o script é show mano!!! Parabéns e brigadão!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Eu só tenho uma dúvida: tirei duas colunas (as duas últimas), e o filtro não funcionou mais.. é possível personalizar o número de campos/colunas?

Mais uma vez obrigado. http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

Wmssuper.

wmssuper· 3 de ago.

Opa, consegui hehe, era só trocar <4 por <2 por exemplo. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Hehe mal a ignorância, é q eu não manjo de javascript. :P

nettotma14· 18 de ago.

Não sabia que isso era possivel com javascript heheh

hinom· 21 de ago.

parabéns muito bom!

EderBaum· 2 de set.

Mas se eu precisar inserir um link no nome por exemplo???

<tr> <td><a href="http://www.umaurl.com/dir?par=2">ALESSANDRA SILVA</a></td> <td>Funcionário</td> <td>MECÂNICA</td> <td>DESENHISTA PROJETISTA MECÂNICO</td> <td>Ativo</td> </tr>

Como faço para trabalhar com isso?

hinom· 3 de set.

humm.. teria que criar uma função que oculte as tags na busca

Heber Almeida· 21 de jul.

ótimo código, só que não funciona no firefox

Otata· 22 de jul.

para funcionar no ff, coloque o id nos input

 <tr>
 <td width="301"><input id="filt0" type="text" onkeyup="filter('lista')"></td>
 <td width="100"><input id="filt1" type="text" onkeyup="filter('lista')"></td>
 <td width="135"><input id="filt2" type="text" onkeyup="filter('lista')"></td>
 <td width="146"><input id="filt3" type="text" onkeyup="filter('lista')"></td>
 <td width="48"><input id="filt4" type="text" onkeyup="filter('lista')"></td>
 </tr>

Heber Almeida· 24 de jul.

Opa otata valeu o codigo funfou no ff, mas as tabelas que mostram o resultado ficaram desconfiguradas mesmo alterando o valor da largura correta que não tinha valor, como resolver este segundo problema. valeu!