No post de hoje vamos mostrar como construir um filtro simples com JavaScript para filtrar dados de forma dinâmica em tabelas HTML.
Existe centenas de bibliotecas e componentes prontos que faz este mesmo resultado, mas é sempre bom saber implementar sem dependências externas.
Vamos iniciar criando uma tabela simples com alguns dados.
<input type="text" id="campo_busca" onkeyup="busca()" placeholder="Busca pelo nome...">
<table id="tabela_dados">
<tr class="header">
<th style="width:60%;">Nome</th>
<th style="width:40%;">Função</th>
</tr>
<tr>
<td>Carlos Augusto</td>
<td>Ajudante</td>
</tr>
<tr>
<td>Maria Silva</td>
<td>Faxineira</td>
</tr>
<tr>
<td>Joana Amaral</td>
<td>Contadora</td>
</tr>
<tr>
<td>Marcos Gomes</td>
<td>Segurança</td>
</tr>
</table>Atenção para os IDs dado ao campo e tabela que respectivamente foram: campo_busca e tabela_dados. Pois vamos usar eles em seguida.
Com isso criamos nossa tabela que terá a seguinte aparência, bem simples ainda, mas vamos dar, uma melhorada.
Agora vamos escrever nossa função JavaScript para realizar a busca:
<script>
function busca() {
// declaração das variaáveis
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("campo_busca"); // id do campo de busca
filter = input.value.toUpperCase();
table = document.getElementById("tabela_dados"); // id da tabela
tr = table.getElementsByTagName("tr");
// loop em todas as linhas da tabela e oculte aquelas que não correspondem à consulta de pesquisa
for (i = 0; i < tr.length; i++)
{
td = tr[i].getElementsByTagName("td")[0];
if (td)
{
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1)
{
tr[i].style.display = "";
}
else
{
tr[i].style.display = "none";
}
}
}
}
</script>Algumas observações:
- Remova toUpperCase() se desejar realizar uma pesquisa com distinção entre maiúsculas e minúsculas.
- Altere tr[i].getElementsByTagName(‘td’)[0] para [1] se desejar pesquisar pela coluna “Função” (índice 1) em vez de “Nome” (índice 0).
Agora vamos melhorar o estilo de nossa tabela.
#campo_busca {
background-image: url('https://cdn-icons-png.flaticon.com/512/1159/1159934.png');
background-position: 10px 12px;
background-repeat: no-repeat;
background-size: 20px;
width: 50px;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#tabela_dados {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#tabela_dados th, #tabela_dados td {
text-align: left;
padding: 12px;
}
#tabela_dados tr {
border-bottom: 1px solid #ddd;
}
#tabela_dados tr.header, #tabela_dados tr:hover {
background-color: #f1f1f1;
}Com o estilo melhorado…
E agora testando a busca:
