Return to Snippet

Revision: 67544
at October 10, 2014 17:17 by bboydflo


Updated Code
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);
    }
});

Revision: 67543
at October 10, 2014 16:50 by bboydflo


Updated Code
$(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);
    }
});

Revision: 67542
at October 3, 2014 16:57 by bboydflo


Initial Code
$(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");
            }
        });
    });
});

Initial URL
http://jsfiddle.net/bboydflo/0rbh76kj/

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

Initial Title
simple table filter with jquery

Initial Tags
table, jquery, filter

Initial Language
JavaScript