javascript - jQuery Table Row Filtering by Column

Question

I'm trying to filter table rows in an intelligent way (as opposed to just tons of code that get the job done eventually) but a rather dry of inspiration.

I have 5 columns in my table. At the top of each there is either a dropdown or a textbox with which the user may filter the table data (basically hide the rows that don't apply)

There are plenty of table filtering plugins for jQuery but none that work quite like this, and thats the complicated part :|

Answer 1

Here is a basic filter example http://jsfiddle.net/urf6P/3/

It uses the jquery selector :contains('some text') and :not(:contains('some text')) to decide if each row should be shown or hidden. This might get you going in a direction.

EDITED to include the HTML and javascript from the jsfiddle:

$(function() {    
    $('#filter1').change(function() { 
        $("#table td.col1:contains('" + $(this).val() + "')").parent().show();
        $("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
    });

});