Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Filtro não habilita as linhas corretamente

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Filtrando uma tabela e atividade Implementando a lógica de filtragem

por Bruno Cardozo Cotrim da Costa
| 140.7k xp | 20 posts

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
por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

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!

por Bruno Cardozo Cotrim da Costa
| 140.7k xp | 20 posts

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.

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador

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!!!

por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

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!

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador

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

por Bruno Cardozo Cotrim da Costa
| 140.7k xp | 20 posts

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!
por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador

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!!!