Input error inside Div

Asked

Viewed 49 times

0

I have a table and I’m making a filter worked, but when I put the input inside the div to align can not filter, even takes 1 letter but does not filter more.

<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>
html jquery input div grid
  • 1

    Try changing $(this).parent().index() for $(this).closest("td").index()

  • 1

    [sopt] makes use of the structure of questions and answers in which questions should be questions and answers should be answers. If you found the solution to the problem, post as reply, not as a question edit. Also remember to explain what the problem was and why the code solved it. Posting only a single piece of code is unlikely to be useful to the community and may receive negative votes.

1 answer

0

The error here, the input was previously inside the table so I used

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

to take the value that was in column 1, then when I put the input in a div outside the table I had forgotten it, the solution was to set the column directly

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

Full code table filter with 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>

Browser other questions tagged html jquery input div grid

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