0

Tenho uma tabela e estou fazendo um filtro deu certo, mas quando coloquei o input dentro da div pra alinhar nao consegue filtrar, ate pega a 1 letra mas nao filtra mais.

<script type="text/javascript">
$(function(){
$("#inputUserfilter").keyup(function(){  
    var index = $(this).parent().index();
    console.log('test');
    var nth = "#tableUser td:nth-child("+(index+1).toString()+")"; 
    var valor = $(this).val().toUpperCase();
    $("#tableUser tbody tr ").show();
    $(nth).each(function(){
        if($(this).text().toUpperCase().indexOf(valor) < 0){
           $(this).parent().hide(); 
        }
    });
});
$("#inputUserfilter").blur(function(){
    $(this).val("");
});
});
</script>







<div class="styleinput" >
<label>Filtrar: </label> 
<input type="text" id="inputUserfilter"/>
</div>
2
  • 1
    Tente trocando $(this).parent().index() por $(this).closest("td").index()
    – Sam
    Commented 20/05/2019 às 22:17
  • 1
    [sopt] faz uso da estrutura de perguntas e respostas em que perguntas devem ser perguntas e respostas devem ser respostas. Se achou a solução para o problema, poste como resposta, não como edição da pergunta. Lembre-se também de explicar qual era o problema e porquê o código o resolveu. Postar apenas um trecho de código avulso provavelmente não será útil para a comunidade e estará passível de receber votos negativos.
    – Woss
    Commented 21/05/2019 às 12:21

1 Resposta 1

0

O erro esta aqui, o input estava anteriormente dentro da tabela por isto eu usei

var nth = "#tableUser td:nth-child("+(index+1).toString()+")"; 

para pegar o valor que estava na coluna 1, ai quando coloquei o input em uma div fora da tabela eu havia esquecido disto, a soluçao foi setar a coluna diretamente

var nth = "#table td:nth-child(1)"; 

Código completo filtro de tabela com input

<div class="styleinput" >
     <label>Filtrar: </label> 
     <input type="text" id="inputfilter"/>
</div>

<script>
$(document).on('keyup','#inputfilter', function () {     
    var nth = "#table td:nth-child(1)"; 
    var valor = $(this).val().toUpperCase();

    $("#table tbody tr ").show();
    $(nth).each(function(){
        if($(this).text().toUpperCase().indexOf(valor) < 0){
            $(this).parent().hide(); 
        }
    });
});   
</script>

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 .