Entrar Ainda não tem acesso?
2
respostas

Filtro não está funcionando!!

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

por Everton Ricardo Silva Curti
| 65.3k xp | 6 posts

Boa tarde Pessoal, meu filtro não funciona na página, apenas no console. Alguem consegue me ajudar? abaixo vou postar o js, htm e css.

filtra.js

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

campoFiltro.addEventListener("input", function(){ 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 tdNome = paciente.querySelector(".info-nome");
        var nome = tdNome.textContent;
        var expressao = new RegExp(this.value, "i");
        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");
    }
}

});

index.css

*{ box-sizing: border-box; }

body{ font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; }

header{ background-color: #333; height: 3em; color: #FFF; margin-bottom: 1em; }

header h1{ font-size: 2em; display:inline-block; vertical-align: middle; } header h2{ font-size: 2em; display:inline-block; vertical-align: middle; }

header .container:before{ content: ''; display:inline-block; height: 100%; vertical-align: middle; }

.container{ width: 60%; height: 100%; margin: 0 auto; }

section{ margin: 2em 0; overflow: hidden; }

section h2{ font-size: 3em; display: block; padding-bottom: .5em; border-bottom: 1px solid #ccc; margin-bottom: .5em; }

table{ width: 100%; margin-bottom : .5em; table-layout: fixed;

}

td, th { padding: .7em; margin: 0; border: 1px solid #ccc; text-align: center; }

th{ font-weight: bold; background-color: #EEE; }

label{ color: #555; display: block; margin-bottom: .2em; }

.campo{ margin: 0; padding-bottom: 1em; width: 100%; border: 1px solid #ccc; padding: .7em; width: 100%; }

.campo-medio{ display: inline-block; padding-right: .5em; }

.grupo{ width: 32%; display: inline-block; padding: 10px 0px; }

button{ padding: .5em 2em; border: 0; border-bottom: 3px solid; font-size: 1.2em; cursor: pointer; margin: 0; margin-top: -3px; color: #fff; background-color:#0c8cd3; border-color: #04324c; width: 20%; display: block; clear: both; margin: 10px 0px;

}

button:active{ margin-top:0px; border: 0; }

button[disabled=disabled], button:disabled { background-color: gray; border-color: darkgray;

}

.adicionar-paciente{ margin-top: 30px; }

.campo-invalido{ border: 1px solid red; }

.paciente-invalido{ background-color: lightcoral; }

#mensagens-erro{ color: red; }

.fadeOut{ opacity: 0; transition: 0.5s; }

#filtrar-tabela{ width: 200px; height: 35px; margin-bottom: 10px; }

.invisivel{ display: none; }

2 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Everton, tudo bem?

Faltou o arquivo html, você pode postar aqui? E os demais arquivos.

por Everton Ricardo Silva Curti
| 65.3k xp | 6 posts

segue código HTML:

</head>
<body>

    <header>
        <div class="container">
            <h1 class = "titulo">Aparecida Nutrição</h1>
        </div>
    </header>
    <main>
        <section class="container">
            <h2>Meus pacientes</h2>

            <label for="filtrar-tabela">Filtre:</label>
            <input type = "text" name = "filtro" id="filtrar-tabela" placeholder="Digite o nome do 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>
    <script src="js/calcula-imc.js"></script>
    <script src="js/form.js"></script>
    <script src="js/remover-paciente.js"></script>
    <script src="js/filtra.js"></script>

</body>