6
respostas

Filtro não funcionando

Já copiei e colei conforme o descritivo da aula e continua não funcionando. Ao digitar o nome do paciente a tabela some, mas quando apaga, o nomes voltam ao normal.

filtra.js

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

campoFiltro.addEventListener("input", function(){
    var pacientes = document.querySelectorAll(".paciente");
    console.log(this.value);

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

            if (nome != 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");
        }
    }
});
6 respostas

Oi, Marcel, tudo bem?

Você pode disponibilizar o seu HTML para testarmos?

<header>
    <div class="container">
        <h1 class="titulo">Aparecida Nutrição</h1>
    </div>
</header>
<main>
    <section class="container">
        <h2>Meus pacientes</h2>
        <label for="filtar-tabeça">Filtre:</label>
        <input type="text" name="filtro" id="filtrar-tabela" placeholder="Nome paciente">
        <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="primeiro-paciente">
                    <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">
                    <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">
                    <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">
                    <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">
                    <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="mensagens-erro">

    </ul>
    <form id="form-adiciona">
        <div class="grupo">
            <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" 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>
<script src="js/form.js"></script>
<script src="js/exclui-paciente.js"></script>
<script src="js/filtra.js"></script>

Não sei porque, mesmo filtro está funcionando quase por completo agora. Quando adiciono um novo paciente, esse não é filtrado e fica sempre a amostra.

Ex: novo paciente nome Carlos, quando filtro Erica fica aparecendo Erica e embaixo o Carlos.

Boa tarde, Marcel! Como vai?

Pode ser que haja algum problema em algum outro arquivo JS. Vc poderia mandar pra cá o conteúdo completo de todos os arquivos JS, por favor? Assim poderemos tentar te ajudar de forma mais efetiva!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

No console está dando erro na linha 11. Filtra.js

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

campoFiltro.addEventListener("input", function(){ var pacientes = document.querySelectorAll(".paciente"); console.log(this.value);

if (this.value.length > 0){
    for (var i = 0; i < pacientes.length; i++){
        var paciente = pacientes[i];
        var tdNome = paciente.querySelector(".info-nome");
        var nome = tdNome.textContent;
        var expressao = new RegExp(this.value, "i")//Faz busca letra por letra
                                //(o que, como)"i" busca por maisc. e minusc.
        if (!expressao.test(nome)){
            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");
    }
}

});

Exclui-paciente.js

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

var tabela = document.querySelector("table");

tabela.addEventListener("dblclick", function(event) { // Somente executará nosso código caso o elemento em que clicamos seja um

if (event.target.tagName == "TD"){ event.target.parentNode.classList.add("fadeOut");
setTimeout(function(){
    event.target.parentNode.remove();
},500)};//Segura a remoção por 0.5s conforme transição

//ou
//var alvoEvento = event.target;
//var paiDoAlvo = alvoEvento.parentNode; // TR = paciente = remover 
//paiDoAlvo.remove();

});