Jump to content

Como faria para minha busca enxergar outras tag dentro da tag <td>


FabioAraujo

Postagens Recomendadas

Ola pessoal o codigo abaixo preenche uma tabela de 5 colunas com dados tipo texto, e tem os eventos a ser executado partindo do acionamento das teclas, se eu retirar <button id="acessar">ACESSAR</button>, a busca vai funcionar quando eu coloco novamente o que eu retiro para de funcionar, poderiam me ajudar, gostaria de colocar um botão pegando o conteúdo da quarta coluna e assim direcionar a uma rota site externo.

 

 

//InicioPopular tabela

for(var i=0 ;i < dados.length ; i++){

 

    var tr = `<tr><td>${dados[i][0]}</td><td>${dados[i][1]}</td><td>${dados[i][2]}</td><td>${dados[i][3]}</td><td><button id="acessar">ACESSAR</button></td></tr>`;

 

    tbody.innerHTML+=tr;//tbody recebe todos os elementos da tabela dos elementos contidos em <tr></tr>

}

//fim popular tabela

 

document.getElementById("txtBusca").addEventListener("keyup",function(){

 

var busca = document.getElementById("txtBusca").value.toLowerCase(); //obter o valor do campo de busca e joga todos os caracteres para Minuscula

 

      for(var i = 0; i < tbody.childNodes.length;i++){ //obter todos os nodes do tbady

 

        var achou = false;

 

         var tr = tbody.childNodes[i]; //acessa todos elementos tr

 

         var td = tr.childNodes;  //td recebe os itens encontrados.

 

              for(var j = 0; j<td.length;j++){ //varre as 4 colunas das tabela verificando os valores contidos

              Quando coloco outra tag dentro do td da erro nesta linha abaixo

                 let valor = td[j].childNodes[0].nodeValue.toLowerCase();/ /valor recebe todos os dados inseridos nas colunas e passa tudo para minuscula

                 

                 if(valor.indexOf(busca)!=0){ //verifica se o  que foi digitado no campo input se esta contido nas colunas,

                       achou = true;

                    }

              }

              if(achou){

                tr.style.display = "table-row";

 

              }else{

                tr.style.display = "none";

           }

       }

});

 

index.html style.css

Editado por FabioAraujo
arquivo script
Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
  • Quem está online   0 Membros, 0 Anônimos, 53 Visitantes (Ver lista completa)

    • There are no registered users currently online


×
×
  • Create New...