CSS / JQuery - Filtering Table Rows and Inverting the Selection

Question

Hi,

I have a table with a number of rows, I then want to highlight the rows that contain value x and then invert the selection.

So far I am able to select the rows that contains the filter value but inverting it is giving me problems.

First I am selecting the rows that match my search value and add a class name:

var rows = $("#table tbody tr td:nth-child(1):contains('" + searchValue + "')");
$(rows).parent().addClass('filtered');

Then I am trying to add a class name that doesn't have the 'filtered' class name, this is the line that I just cant get right:

$('#table tbody tr:not(.filtered)').addClass('hidden');   

The class hidden ends up on all rows.
Anyone got any ideas?

Thanks,
Martin

Answer 1

I tried it: http://jsfiddle.net/eYRWj/ it doesn't. It works as expected.

Try console.log(rows) (with firebug installed and its console enabled), to see if they are really marked as .filtered, i.e. if the search succeeded.

Answer 2

try with double quotes like this: $('#table tbody tr:not(".filtered")').addClass('hidden');