How can you find a word in the text of a table?

Asked

Viewed 118 times

1

I’ve made several attempts with this logic: 

<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>

For now nothing has worked ...

javascript table

1 answer

3


I made the necessary repairs used the millennial tenência of DEBUG. Super recommend. The repairs were more than one, so I commented on the code.

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

    And again, thanks for the help. It’s cool!!! consider my vote.

Browser other questions tagged javascript table

You are not signed in. Login or sign up in order to post.