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

não consigo pesquisar na tabela

boa noite professor, estou treinando fazendo um código próprio parecido com o do professor.

mais quando eu vou pesquisar na tabela o nome da pessoa aparece o erro Uncaught TypeError: Cannot read property 'textContent' of null at HTMLInputElement. (teste.html:92)

e na linha 92 tem o

var nome  =  tdNome.textContent;

HTML

<label form="filtrar-tabela">Filtre:</label>

    <input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite o nome do aluno">
       <table id="teste" class="table table-hover table-dark">

      <tbody id="tabela-alunos">
        <tr class="aluno">
          <td class="info-title">Alunos</td>
        </tr>

        <tr class="aluno">
          <td class="info-nome">Pedro</td>
        </tr>

      </tbody>
    </table>


   <form id="form-adicionar">
    <div class="grupo">
            <label for="nome">Nome:</label>
            <input id="nome" name="nome" type="text" placeholder="digite o nome" class="campo">
        </div>

    <button id="adicionar-aluno" type="button" class="btn btn-primary botao">Adicionar Aluno Novo</button>
</form>

JS

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

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

            var alunos = document.querySelectorAll(".aluno");

            if(this.value.length > 0){
                for( var i = 0; i < alunos.length ; i++){
                  var aluno = alunos[i];
                  var tdNome = aluno.querySelector(".info-nome");
                  var nome = tdNome.textContent;
                  var expressao = new RegExp(this.value,"i");
                  if( !expressao.test(nome)){
                    aluno.classList.add("invisivel");
                  }else{
                     aluno.classList.remove("invisivel");
                }
             }
               }else{
                 for (var i = 0; i < alunos.length; i++){
                 var aluno = alunos[i];
                 aluno.classList.remove("invisivel");

            }
        }




             });
3 respostas
solução!

Oi Leveditor tudo bem?

Dei uma consertada no seu código para ele funcionar. Dá uma olhadinha:

<style>

    .invisivel{
        display: none;
    }

</style>

<label form="filtrar-tabela">Filtre:</label>

<input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite o nome do aluno">
<table id="teste" class="table table-hover table-dark">

    <tbody id="tabela-alunos">
        <tr class="alunoHead">
            <th class="info-title">Alunos</th>
        </tr>

        <tr class="aluno">
            <td class="info-nome">Pedro</td>
        </tr>

    </tbody>
</table>


<form id="form-adicionar">
    <div class="grupo">
        <label for="nome">Nome:</label>
        <input id="nome" name="nome" type="text" placeholder="digite o nome" class="campo">
    </div>

    <button id="adicionar-aluno" type="button" onclick="adcionarAluno()" class="btn btn-primary botao">Adicionar Aluno Novo</button>
</form>

<script>

    function adcionarAluno(){
        let tr=document.createElement("tr");
        tr.innerHTML=`<th class="info-nome">${document.getElementById("nome").value}</th>`;
        tr.setAttribute("class","aluno");
        document.getElementById("tabela-alunos").appendChild(tr);

    }

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

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

        var alunos = document.querySelectorAll(".aluno");

        if (this.value.length > 0) {
            for (var i = 0; i < alunos.length; i++) {
                var aluno = alunos[i];
                var tdNome = aluno.querySelector(".info-nome");
                var nome = tdNome.innerText;
                var expressao = new RegExp(this.value, "i");
                if (!expressao.test(nome)) {
                    aluno.classList.add("invisivel");
                } else {
                    aluno.classList.remove("invisivel");
                }
            }
        } else {
            for (var i = 0; i < alunos.length; i++) {
                var aluno = alunos[i];
                aluno.classList.remove("invisivel");

            }
        }




    });
</script>

Espero ter ajudado!!!

estar dando erro no var nome = tdNome.innerText;

Deve estar dando erro em outra parte do código. Vou ter que ver o projeto inteiro. Teria como subir a pasta do seu projeto pro github por gentileza.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software