Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Filtro não habilita as linhas corretamente

Olá, no meu código, a classe "invisivel" é atribuída corretamente as linhas da tabela, tornando os pacientes ocultos, porém ao escrever o nome de um paciente corretamente no campo de filtro, o paciente correspondente não reaparece. Quando o campo de filtro é completamente limpo, todos os pacientes voltam a aparecer novamente de forma correta.

Por favor, poderiam me ajudar a encontrar o erro? Segue abaixo o código:

var campoFiltro = document.querySelector("#filtrar-tabela");

campoFiltro.addEventListener("input",funcaoInput);

function funcaoInput()
{
    console.log(this.value);

    var pacientes = document.querySelectorAll(".paciente");

    if( this.value.length > 0 )
    {
        for( var i = 0 ; i < pacientes.length ; i++ )
        {
            var paciente       = pacientes[i];
            var tdNomePaciente = paciente.querySelector("info-nome");
            var nomePaciente   = paciente.textContent;

            if( nomePaciente != this.value )
            {
                paciente.classList.add("invisivel");
            }
            else
            {
                paciente.classList.remove("invisivel");
            }
        }
    }
    else
    {
        for( var i = 0 ; i < pacientes.length ; i++ )
        {
            var paciente = pacientes[i];

            paciente.classList.remove("invisivel");
        }
    }

}
7 respostas

Boa tarde, Bruno! Como vai?

Apenas olhando o código me pareceu tudo ok! Vc verificou se no console do navegador aparecia algum log de erro? Em caso positivo, poderia colar aqui o log de erro completo?

Outra coisa, poderia também compartilhar o projeto completo pelo github e mandar o link aqui? Assim eu poderei dar uma olhada melhor no que está acontecendo para tentar te ajudar!

Grande abraço e bons estudos, meu aluno!

Quanto ao log, nenhuma mensagem de erro é exibida. O único texto exibido é o do próprio código (console.log na linha 8 no início da função "funcaoInput").

Quanto ao github, não sei utilizar essa plataforma corretamente ainda. Verei como funciona e postarei o link para o projeto aqui.

Oi pessoal só passei por aqui para compartilhar como criar um repositório e subir arquivos no Github sem precisar de linha de comando nem nada. (Porque se pesquisar no google vão querer que você saia dando comandos rsrsrs).

Primeiro de tudo crie uma conta no Github e logue nela. E vá seguindos os passos em azul. Alguma dúvida é só me perguntar. Clique no botão verde New ou arraste os arquivos se não estiver pegando bem a estrutura de pastas pegue a url que está aparecendo na barra de url

Espero ter ajudado!!!

Boa, André! Na realidade, como eu já vi que vc postou isso em outros tópicos eu ia pesquisar no Google pra ver se encontrava algum tópico que tivesse esse comentário seu e linkar aqui! hahahaha

Poupou um tempo de pesquisa! Brigadão pela colaboração, camarada!

Disponha Gabriel, salva nos favoritos, clique em editar na minha mensagem e dê copiar e colar sempre que precisar.

Muito obrigado pelo passo a passo de como subir os arquivos. Seguindo as instruções, o link que obtive foi: https://github.com/BrunoCardozo/introduco-javascript

solução

Ao invés de

         if( nomePaciente != this.value )
            {
                paciente.classList.add("invisivel");
            }
            else
            {
                paciente.classList.remove("invisivel");
            }

use

            if (nomePaciente.toLowerCase().indexOf(this.value.toLowerCase()) >= 0) {
                paciente.classList.remove("invisivel");
            }
            else {
                paciente.classList.add("invisivel");
            }

Espero ter ajudado!!!