带有jquery的简单表过滤器

Posted 2021-02-23

have to change this snippet in order to hide filtered rows. Not tried out yet, but works fine in the jsfiddle

Original example here: http://jsfiddle.net/hHJxP/
$(document).ready(function() {
    $("input#search").keyup(function() {
        var self = $(this);
        $("tbody td").css("border", "0px").each(function(i, obj) {
            if($(obj).html().toLowerCase().indexOf(self.val().toLowerCase()) > -1 && self.val()) {
                $(obj).css("border", "1px solid blue");
            }
        });
    });
});
 
---------------------------------------------
changed to this
 
var columnFilter = 2;
 
// to apply the filter on the second column in a table
$('body').on('keyup', '#input', function(e){
    try{
        var self  = $(this);
        var value = $.trim(self.val()).toLowerCase();
        // apply the filter only on the iLocation column
        var locationFilter = 'td:nth-child('+columnFilter+')';
        $(locationFilter).each(function(i, val) {
        var cellContent = $.trim($(this).text()).toLowerCase();
        if(cellContent.indexOf(value) == -1)
            $(val).parent('tr').hide();
        else $(val).parent('tr').show();
        });
    } catch(e){
        console.log('Error! - ' +e);
    }
});