Give way to search for word in the text of a table?

Question

Give way to search for word in the text of a table?

Navigation

#1 by (3 votes)

1

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

So far nothing has worked ...

javascript table

asked by anonymous 08.01.2017 / 05:01

1 answer

How to play a layout component up? [duplicate] Download within app [closed]

score 3 · Accepted Answer

I made the necessary repairs used to the millennial tenure of the DEBUG. Super recommend it. 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>