Olá Ítalo, tudo bem com você?
Peço desculpas pela demora no retorno.
O uso do método forEach()
não irá gerar impactos no funcionamento da expressão regular. Conforme testes e simulações, no código apresentado os pacientes adicionados através do formulário não estão sendo reconhecidos pelo método forEach()
devido à coleta dos pacientes utilizando o método querySelectorAll
acontecer apenas uma vez no momento em que a página é carregada fazendo com que os novos usuários não sejam adicionados a variável pacientes
.
Será necessário colocar a declaração e atribuição da variável pacientes
dentro do eventoinput
, desta forma sempre que ocorrer o evento de input
acontecerá uma nova coleta de pacientes através do método querySelectorAll
, reconhecendo os novos pacientes adicionados à tabela.
No arquivo filtra.js. Modifique o código, adicionando a variável pacientes
ao evento input
. Deixando como apresentado abaixo.
filtro.addEventListener("input", function () {
var pacientes = document.querySelectorAll(".paciente");
// Código do evento
}
Após realizar a modificação listada acima, salve o arquivo filtra.js e abra o arquivo index.html no navegador. Adicione um novo paciente e verifique o funcionamento do filtro.
Quanto ao uso do método test()
da expressão regular. Peço que realize uma nova tentativa de uso deste método. Lembrando que entre os parênteses devemos passar o campo que será feito a busca, neste caso o nome
presente na td
. O método test()
deve ser chamado na expressão criada (re
), conforme apresentado abaixo.
var nome = tdNome.textContent;
var re = new RegExp(filtro.value, "i");
if (!re.test(nome)) {
paciente.classList.add("invisivel");
} else {
paciente.classList.remove("invisivel");
}
Após realizar a modificação listada acima, salve o arquivo filtra.js e abra o arquivo index.html no navegador. Adicione um novo paciente e verifique o funcionamento do filtro.
Código completo com as mudanças descritas já aplicadas
var filtro = document.querySelector("#filtrar-tabela");
filtro.addEventListener("input", function () {
var pacientes = document.querySelectorAll(".paciente");
if (this.value != "") {
pacientes.forEach(function (paciente) {
var paciente = paciente;
var tdNome = paciente.querySelector(".info-nome");
var nome = tdNome.textContent;
var re = new RegExp(filtro.value, "i");
if (!re.test(nome)) {
paciente.classList.add("invisivel");
} else {
paciente.classList.remove("invisivel");
}
});
} else {
pacientes.forEach(function (paciente) {
var paciente = paciente;
paciente.classList.remove("invisivel");
});
}
});
Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.
Espero ter ajudado. Em caso de dúvidas estou à disposição.
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!