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