Esta postagem do blog definirá o processo de filtragem da tabela em JavaScript.
Como filtrar tabela em JavaScript?
Vamos ver um exemplo explicando como filtrar uma tabela em JavaScript.
Exemplo
Primeiro, crie uma barra de pesquisa em um documento HTML com o “ onkeyup ” propriedade que chama o “ filtroTableFunc() ” ao soltar a tecla:
< tipo de entrada = 'texto' Eu iria = 'procurar' onkeyup = 'filterTableFunc()' espaço reservado = 'Procurar.....' >< br >< br >
Crie uma tabela que armazene dados de funcionários usando o método
< id da tabela = 'dados do funcionário' fronteira = '1' >
< tr >
< º > Nome º >
< º > E-mail º >
< º > Gênero º >
< º > Designação º >
< º > Data de ingresso º >
tr >
< tr >
< td > John td >
< td > João @ gmail. com td >
< td > Macho td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Estevão td >
< td > estevão @ gmail. com td >
< td > Macho td >
< td > GRH td >
< td > vinte e um / 10 / 2020 td >
tr >
< tr >
< td > Grande td >
< td > mar78 @ gmail. com td >
< td > Fêmea td >
< td > GRH td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. com td >
< td > Macho td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
tabela >
Depois de executar o arquivo HTML, a saída ficará assim:
Depois disso, vamos adicionar funcionalidade à tabela de filtros. Em um arquivo de script JavaScript ou em uma tag, use o código abaixo que filtrará os dados da tabela com base na pesquisa:
função filterTableFunc ( ) {
foi filtroResultado = documento. getElementById ( 'procurar' ) . valor . para letras minúsculas ( ) ;
foi tabelaempemp = documento. getElementById ( 'dados do funcionário' ) ;
foi tr = empTable. getElementsByTagName ( 'tr' ) ;
por ( foi eu = 1 ; eu < tr. comprimento ; eu ++ ) {
tr [ eu ] . estilo . exibição = 'Nenhum' ;
const tdArray = tr [ eu ] . getElementsByTagName ( 'td' ) ;
por ( foi j = 0 ; j - 1 ) {
tr [ eu ] . estilo . exibição = '' ;
parar ;
}
}
}
}
No código acima indicado:
- Primeiro, defina uma função “ filtroTableFunc() ”.
- Acesse a barra de pesquisa usando seu id “ procurar ” para obter o valor inserido e convertê-lo em minúsculas usando o botão “ toLowerCase() ” método.
- Obtenha uma referência para a tabela onde a operação de filtro será executada usando seu id “ dados do funcionário ”.
- Em seguida, obtenha as linhas da tabela usando o comando “ getElementsByTagName ” método.
- Percorra a tabela até seu comprimento, obtenha os dados para cada entrada da tabela e verifique se o valor armazenado da tabela é igual ao valor pesquisado. Se for, exiba-o.
Resultado
A saída acima indica que a operação de filtro foi aplicada com sucesso à tabela.
Conclusão
Uma tabela pode ser filtrada em JavaScript iterando pelos dados da tabela e retornando os dados relevantes. Essa filtragem é feita por meio de uma função chamada em um evento específico. Essa abordagem funcionará de forma que, em dados idênticos inseridos, os dados correspondentes da tabela sejam buscados, independentemente da diferenciação de maiúsculas e minúsculas no campo de texto de entrada. Este post descreve uma abordagem que pode ser usada para filtrar uma tabela em JavaScript.