Question

I have a table with a header and some rows. Each row has its own group, and sometimes they could be similar with the previous group codes.
Also, I have a drop-down list that contains groups IDs. I want to show just the rows that are equal with the drop-down list current value.
For example this is my table id="myTable":

and this is my drop-down:

<select id="groups" name="groups">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

I need to remove 2nd and 3rd row when user change the current selected item of drop-down to 1.
How can I do it using jQuery ?

Answer 1

Something like this:

$("#groups").change(function() {
    var currentGroup = $(this).val();
    $("#myTable tr").each(function() {
       if (this.rowIndex==0) return; // skip heading
       if ($(this).children("td").eq(-1).text() == currentGroup)
          $(this).show();
       else
          $(this).hide();
    });
});​

Demo: http://jsfiddle.net/DBCcF/1/

You could simplify the JS by giving the cells in the third column a particular class, but then I guess that complicates the markup, so…whatever you prefer.