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

Filtro da tabela não funcionando como deveria

Olá! Estou fazendo o curso "JavaScript: programando na linguagem da web", que seria uma versão anterior do curso deste fórum, e por não conseguir criar tópicos novos no fórum daquele, tive que criar neste. No exercício proposto pelo professor, em que ao digitar o nome de um campo, automaticamente os outros nomes somem e somente o digitado fica visível, encontrei dificuldades em fazer da maneira correta. Copiando e colando o código passado pelo professor, a funcionalidade dá certo, entretanto quando eu tento fazer por conta própria, a lista fica simplesmente sumindo, independente do que é digitado.

Abaixo o código:

let campoFiltro = document.querySelector('#filtra-tabela');

campoFiltro.addEventListener('input',function(){

let pacientes = document.querySelectorAll('.paciente');

if(this.value.length > 0){
    for (let i = 0; i < pacientes.length; i++){
        let paciente = pacientes [i];
        let tdNome = document.querySelector('.info-nome');
        let nome = tdNome.textContent;
        let expressao = new RegExp (this.value,'i');

        if(expressao.test(nome)){
            paciente.classList.remove('invisivel');
        }else{
            paciente.classList.add('invisivel');
      }
    }
}else{
    for (let i = 0; i < pacientes.length; i++){
        let paciente = pacientes [i];
        paciente.classList.remove('invisivel');

}}

});

2 respostas

HTML do projeto

</head>
<body>

    <header>
        <div class="container">
            <h1 class="titulo1">Aparecida Nutrição</h1>
        </div>
    </header>
    <main>
        <section class="container">
            <h2>Meus pacientes</h2>
            <label id="label-filtro" for=""filtra-tabela>Procurar pacientes:</label>
            <input type="text" name="filtro" id="filtra-tabela" placeholder="Digite o nome do paciente aqui">
            <table>
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Peso(kg)</th>
                        <th>Altura(m)</th>
                        <th>Gordura Corporal(%)</th>
                        <th>IMC</th>
                    </tr>
                </thead>
                <tbody id="tabela-pacientes">
                    <tr class="paciente" id="paulo">
                        <td class="info-nome">Paulo</td>
                        <td class="info-peso">100</td>
                        <td class="info-altura">2.00</td>
                        <td class="info-gordura">10</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente" id="joao">
                        <td class="info-nome">João</td>
                        <td class="info-peso">80</td>
                        <td class="info-altura">1.72</td>
                        <td class="info-gordura">40</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente" id="erica">
                        <td class="info-nome">Erica</td>
                        <td class="info-peso">54</td>
                        <td class="info-altura">1.64</td>
                        <td class="info-gordura">14</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente" id="douglas">
                        <td class="info-nome">Douglas</td>
                        <td class="info-peso">85</td>
                        <td class="info-altura">1.73</td>
                        <td class="info-gordura">24</td>
                        <td class="info-imc">0</td>
                    </tr>
                    <tr class="paciente" id="tatiana">
                        <td class="info-nome">Tatiana</td>
                        <td class="info-peso">46</td>
                        <td class="info-altura">1.55</td>
                        <td class="info-gordura">19</td>
                        <td class="info-imc">0</td>
                    </tr>
                </tbody>
            </table>

        </section>
    </main>
    <section class="container">
        <h2 id="titulo-form">Adicionar novo paciente</h2>
        <ul id="lista-erros">

        </ul>
        <form id="form-adiciona">
            <div class="">
                <label for="nome">Nome:</label>
                <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
            </div>
            <div class="grupo">
                <label for="peso">Peso:</label>
                <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="altura">Altura:</label>
                <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="gordura">% de Gordura:</label>
                <input id="gordura" name="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
            </div>

            <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
        </form>
    </section>
    <script src="js/calcula-imc.js"></script>            l
    <script src="js/form.js"></script>            
    <script src="js/remove-paciente.js"></script>            
    <script src="js/filtro.js"></script>            

</body>
solução!

Olá, amigo! Recentemente terminei esse curso da Aparecido Nutricionista. E ainda está um pouco fresco em minha memória.

Bom, depois de bater muito a cabeça consegui descobrir o erro:

Esta linha de código está buscando a td com classe .info-nome, dentro do documento inteiro

let tdNome = document.querySelector('.info-nome');

O correto seria buscar dentro da let paciente que faz referência à linha de cada paciente na tabela.

let tdNome = paciente.querySelector('.info-nome');

Espero ter ajudado! ;-) Se tiver alguma dúvida, só chamar!