Ismailp Ismailp - 1 month ago 20
Javascript Question

Filtering table with jQuery

I have this table which has seven columns, each column representing a specific value like so:

I also have five select boxes containing options which I want to use for filtering this data table.

So far, I have come up with this:

$('#mySelectBox').change(function() {

var filtervar = $(this).val();

$('tr td.someclass').each(function () {
if ($(this).text() != filtervar) {
$(this).parent().hide();
} else {
$(this).parent().show();
}
});
});


This code works for one selectbox. How can I tweak it so that I can use five different selectboxes for filtering?

Answer

It is already generic enough. Just change the select box from having ids to classes and target all select boxes with the proper class.


Script:

$('.filter').change(function() { /* ... code ... */ });

HTML:

<select class="filter"> ... </select>
<select class="filter"> ... </select>
<select class="filter"> ... </select>