Filtrar dados da tabela com menu dropdown usando apenas Javascript puro e sem frameworks

9 respostas Resolvido
javascript
Lanytech

Olá, pessoal.

Tenho pesquisado no google e no youtube, mas ainda não consegui encontrar a solução que preciso. O único que consegui chegar perto foi um vídeo de um indiano. Porém, mesmo assim não corresponde ao que eu exatamente necessito.
Se alguém puder me ajudar, agradeço.
Vamos lá:

Tenho uma tabela.
Nesta tabela existem várias colunas.
Uma dessas colunas reúne informações de cor da pele de várias pessoas.
Preciso criar um menu dropdown, que seja relacionada a esta coluna de “skin_color” .
Este menu , de preferência deve estar apresentado por fora da tabela, como se fosse um botão perto da tabela.
Neste menu dropdown, quero que apresente várias opções de “cor da pele”.
A funcionalidade que quero: ao ser selecionada uma “cor da pele”, a tabela me apresente apenas a lista de pessoas as quais são relacionadas com a "cor de pele " que selecionei.

Não quero usar framework datatable. Quero usar javascript puro.
Motivo: o framework vem com outras funcionalidades que não quero.

Estou neste patamar aqui.


9 Respostas

rodriguesabner

O jeito mais simples pra fazer isso é usando o filter.

arr = arr.filter((item) => item.skin === Rosa); //Rosa deve ser a cor que a pessoa selecionou no select.
//arr é o array que popula sua tabela

————

const qSkin = document.querySelector(#combo-skin”);

Ai vc pode trocar o “Rosa” por:

item.skin === qSkin.value
Lanytech

Olá, Rodrigues !

Não entendi exatamente como isso deve ser implementado, porém você já me ajudou bastante em me informar sobre o filter.

Já sabia da existência do filter, mas não com esse nível de detalhamento.

Muito obrigada! Saúde e paz.

rodriguesabner

Vc pode colocar no onchange do select.

<select onchange=“filterBySkin”>
   <option value=“blue>Blue</option>
</select>

function onChange(evt) {
   const value = evt.target.value;
   arr = arr.filter((item) => item.skin === value);
}
rodriguesabner

Eu acho q assim funciona, faz tempo q não uso vanillaJS (tô escrevendo pelo celular pra piorar), se não der certo da um toque aqui

Lanytech

Obrigada !

Lanytech

Vou estudar sobre este vanilla. Muito obrigada pelas dicas Rodrigues ! Ajudou a clarear a mente ! :grinning:

Lanytech

o vanilla seria um framework?
no caso deste código, ele funcionaria apenas se usasse o vanilla?

rodriguesabner
Solucao aceita

Não não, acabei não sendo muito claro nisso, desculpe!

VanillaJS é o javascript puro mesmo

Lanytech

beleza, Rodrigues. valeu !

Criado 10 de outubro de 2022
Ultima resposta 10 de out. de 2022
Respostas 9
Participantes 2