Como filtrar a tabela em javascript

Ao criar uma grande tabela HTML na página, é importante incluir uma funcionalidade de filtro para uma melhor experiência do usuário. Para fazer isso, use JavaScript para filtrar registros em uma tabela pesquisando qualquer registro de tabela em uma caixa de pesquisa. Além disso, o código JavaScript fornece menos linhas de código para funcionar com eficiência.

Esta postagem do blog definirá o processo de filtragem da tabela em JavaScript.

Como filtrar a 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 ()”Quando a chave é lançada:

Crie uma tabela que armazena dados de funcionários usando o

tag e atribua um id “Employeeedata”:

Nome	E-mail	Gênero	Designação	Data de ingresso
John	[email protected]	Macho	CPA	5/5/2020
Stephen	[email protected]	Macho	HRM	21/10/2020
Mari	[email protected]	Fêmea	HRM	16/05/2022
Rhonda	[email protected]	Macho	CFA	23/06/2022

Depois de executar o arquivo HTML, a saída ficará assim:

Depois disso, vamos adicionar funcionalidade à tabela de filtro. 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 ()
var filterResult = documento.getElementById ("pesquisa").valor.tolowerCase ();
var em esvazia = documento.getElementById ("empregadoata");
var tr = emagulado.getElementsByTagName ("tr");
para (var i = 1; i < tr.length; i++)
tr [i].estilo.display = "nenhum";
const tDarray = tr [i].getElementsByTagName ("TD");
for (var j = 0; j -1)
tr [i].estilo.display = "";
quebrar;

No código acima:

• Primeiro, defina uma função “filtroTableFunc ()”.
• Acesse a barra de pesquisa usando seu ID “procurar”Para obter o valor inserido e convertê -lo em uma minúscula usando o“tolowerCase ()”Método.
• Obtenha uma referência à tabela onde a operação do filtro será executada usando seu ID “Employeeedata”.
• Então, pegue as linhas de mesa usando o “getElementsByTagName”Método.
• Itera através da tabela até o seu comprimento, obtenha os dados para cada entrada da tabela e verifique se o valor armazenado da tabela é igual ao valor pesquisado. Se for, então exiba -o.

Saída

A saída acima indica que a operação do filtro foi aplicada com sucesso na tabela.

Conclusão

Uma tabela pode ser filtrada em JavaScript, iterando os dados da tabela e retornando os dados relevantes. Esta filtragem é feita através de uma função chamada em um evento específico. Essa abordagem funcionará de tal maneira que, nos dados idênticos inseridos, os dados correspondentes da tabela são buscados, independentemente da sensibilidade do caso no campo de texto de entrada. Este post descreve uma abordagem que pode ser usada para filtrar uma tabela em javascript.