Olá Ana! Tudo bem?
Bom, eu copiei o seu código e implementei no meu aqui (fiz o mesmo curso), fiz alguns comentários e ajustes nele:
var campoFiltro = document.querySelector("#filtrar-tabela");
campoFiltro.addEventListener("input", function(){
// this.value; /*Essa linha não diz nada, assim como seu "EventListener" deve escutar e executar seu filtro*/
// }); /*toda vez que o usuário teclar. Ou seja, a função deve englobar todo código.*/
var pacientes = document.querySelectorAll(".paciente");
//if(this.value.length > 0){ /*Este "if" está dizendo: Se tem algo escrito no campoFiltro, execute isto:... */
// Ao meu ver, entra em conflito com a função do "EventListener". A função deste "if" neste código é testar o campoFiltro após a varredura dos pacientes.*/
for (var i = 0; i < pacientes.length; i++) { /*Aqui faltava um "s" em pacientes*/
var paciente = pacientes[i];
var tdNome = paciente.querySelector(".info-nome");
var nome = tdNome.textContent;
var expressao = new RegExp(this.value,"i");
if (this.value.length>0) {
if (!expressao.test(nome)){
paciente.classList.add("invisivel");
} else {
paciente.classList.remove("invisivel");
}
}else {
paciente.classList.remove("invisivel");
// Neste "else", você está dizendo: Se este if (campoFiltro.value>0) for falso, faça isto:...
// Portanto, quando o campoFiltro estiver vazio, você quer que apareça todos os pacientes, removendo então a classe invisível.
// for (var i = 0; i <pacientes.length; i++) {
// var paciente = pacientes[i];
// paciente.classList.remove("invisivel");
// }
}
}
})
Depois disso funcionou o filtro. Espero ter ajudado!
Se eu puder ajudar em algo mais ou tiver algum comentário a fazer, estou aqui!
Abraço e bons estudos