1

Fiz várias tentativas com esta lógica:

<html>

<head>

<script>

window.onload = function(){

var filtro = document.getElementById('nome').value;
var tabela = document.getElementById('lista');
filtro.onkeyup = function() {
    var nomeFiltro = filtro.value;
    for (var i = 1; i < tabela.rows.length; i++) {
    var conteudoCelula = tabela.rows[i].cells[0].textContent;
    var corresponde = conteudoCelula.toLowerCase().indexOf(nomeFiltro) >= 0;
    tabela.rows[i].style.display = corresponde ? '' : 'none';
        }
    }
}
</script>

</head>

<body>

<table id="lista">
    <thead>
    <tr>
        <th><div><input type="text" id="nome" value=""/></div></th>
        <th>Telefone</th>
        <th>Ramal</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Ana</td>
        <td>3333-3333</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Pedro</td>
        <td>3333-3333</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Luiz</td>
        <td>3333-3333</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Maria</td>
        <td>3333-3333</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Rodrigo</td>
        <td>3333-3333</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Silvana</td>
        <td>3333-3333</td>
        <td>123</td>
    </tr>
    </tbody>
</table>

</body>
</html>

Por enquanto nada funcionou ...

1 Resposta 1

3

Fiz os reparos necessário utilizado a milenar tenência do DEBUG. Super recomendo. Os reparos foram mais de um, então comentei no código.

window.onload = function(){
  

/*Aqui você pegou apenas o contúdo do elemento, e não uma referencia pra ele*/
var filtro = document.getElementById('nome').value;
  
var tabela = document.getElementById('lista');
  
  /* Para adicionar um evento ao elemento, você precisa pegar uma
   * referencia novamente, já que na variavel "filtro" você adicionou apenas o
   * valor do elemento.*/
 document.getElementById('nome').onkeyup = function(event) { 

   /*É preciso uma referencia para o objeto para pegar seu valor atual. 
* Você poderia utilizargetElementById 
* novamente, ou salvar essa referencia em uma variável. Porem há um jeito
* mais fácil.
    */
    var nomeFiltro = event.target.value; 
   
    for (var i = 1; i < tabela.rows.length; i++) {
            
      /*
      * Se quer uma comparação que ignore se está em maiúsculo ou em
* minusculo, devera comparar a busca e o conteúdo.
      */
      
      
    var conteudoCelula = tabela.rows[i].cells[0].textContent;
    var corresponde = conteudoCelula.toLowerCase().indexOf(nomeFiltro.toLowerCase()) >= 0;
    tabela.rows[i].style.display = corresponde ? '' : 'none';
        }
    }
}
<head>



</head>

<body>

<table id="lista">
    <thead>
    <tr>
        <th><div><input type="text" id="nome" value=""/></div></th>
        <th>Telefone</th>
        <th>Ramal</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Ana</td>
        <td>3333-3333</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Pedro</td>
        <td>3333-3333</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Luiz</td>
        <td>3333-3333</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Maria</td>
        <td>3333-3333</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Rodrigo</td>
        <td>3333-3333</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Silvana</td>
        <td>3333-3333</td>
        <td>123</td>
    </tr>
    </tbody>
</table>

</body>
</html>

1
  • 1
    E mais uma vez, obrigado pela ajuda. Ficou legal!!! considere o meu voto. Commented 8/01/2017 às 4:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .