HTML criar filtro automático html

Joseph Renato · 9 de dezembro de 2017

Por favor, estou tentado mas sem sucesso criar este tipo de arquivo html que funcione em uma única folha de formúlario. Segue abaixo o código do arquivo index.

<DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="estilo.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<head>
</head>
<body>
<div id="divConteudo">
<table id="tabela">
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Grupo</th>
</tr>
<tr>
<th><input type="text" id="txtColuna1"/></th>
<th><input type="text" id="txtColuna2"/></th>
<th><input type="text" id="txtColuna3"/></th>
</tr>
</thead>
<tbody>
<tr>
<td>001.01-A</td>
<td>Feijão preto</td>
<td>Cerais</td>
</tr>
<tr>
<td>001.02-B</td>
<td>Feijão branco</td>
<td>Cerais</td>
</tr>
<tr>
<td>002.10-C</td>
<td>Arroz parboilizado</td>
<td>Cerais</td>
</tr>
<tr>
<td>003.12-D</td>
<td>Iogurte de morango</td>
<td>Laticínios</td>
</tr>
<tr>
<td>041.27-E</td>
<td>Sabão em pó</td>
<td>Limpeza</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Na parte estilo.Css vem assim o código:

corpo{ 
  font-family: Verdana; 
} 
#tabela { 
  largura: 100%; 
  borda: solid 1px; 
  texto-alinhamento: esquerda; 
  colapso de fronteira: colapso; 
} 
#tabela tbody tr { 
  borda: sólido 1px; 
  altura: 30px; cursor: ponteiro; 
} 
#tabela thead { 
  fundo: bege;
} 
#tabela thead th: nth-child (1) { 
  largura: 100px; 
} 
#tabela input { 
  cor: marinha; 
  largura: 100%; 
}

Na parte script.Js vem assim o código:

$ (function () { 
  $("#tabela input").keyup(function (){ 
    var index = $ (this) .parent (). index (); 
    var nth = "#tabela td: nth-child (" + (índice + 1) .toString () + ")"; 
    var valor = $ (este) .val (). toUpperCase (); 
    $ ("# tabela tbody tr"). show (); 
    $ (nth) .each (function () {
      se ($ (este) .text (). toUpperCase (). indexOf (valor) <0) 
      { 
        $ (this) .parent (). hide (); 
      } 
    }); 
  }); 
  $ ("# tabela input"). borrão (function () {
    $ (este) .val (""); 
  }); 
});

eSTOU TENTANDO COLOCAR TUDO EM UM UNICO CÓDIGO HTML

DiF · 9 de dezembro de 2017

@Joseph Renato

Não sei se entendi, mas você está tentando colocar o conteúdo do arquivo jquery versão minified no seu HTML, ao invés de carregar pelo CDN como estas fazendo agora?

Se sim, basta você baixar o arquivo jQuery minified e colocar na mesma pasta do seu arquivo JS.. aí carregar da mesma forma que ele:

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

Em tempo, essa versão é ultrapassada , atualmente está na versão 3.2.1

PS: clique no link que diz: " Download the compressed, production jQuery 3.2.1"

Além disso, recomendo que edite seus códigos, para corrigir as "traduções" indesejadas no código. Visto que você postou eles sem o uso do botão CODE<> algumas palavras ficaram em português, estragando o código.