asked on

jQuery show/hide table rows

Hello Experts,

I am using jQuery.....

I have a long table such as in the example below. What i am trying to do is hiding all the "tr" in the table but the ones i would like to keep such as in the array.

MODEL | COLOR | SIZE
0.1.5 Blue 86,70
1.5.3 Red 113,60
2.2.1 Yello 21,45
1.5.7 Green 120,63

so for example i want to show only the rows ("tr") that its first td contains

0.1.5 and 2.2.1 and .......

Of course the first row (titles) should stay on.

Since this is a long list table its better to have the model numbers in an array.

Thank you for the help!

Alexandre Simões

something like:

var hideThese = ['0.1.5', '2.2.1'];

$.each('#tableId tr', function(idx, item){
     var $row = $(item);
     var $cell = $($row.find('td')[0]);

     if(!$.inArray($cell.html(), hideThese))
          $row.hide();
     else
          $row.show();
});

Open in new window

Sorry I couldn't test it...

ASKER CERTIFIED SOLUTION

Rainer Jeschor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Refael

ASKER

Hi RainerJ

Works perfect! I just amended it a bit.

AlexCode, not only that it did not work but also it prompt for few errors in the code :-(

Refael

ASKER

Works, Perfect! Thank you!

Alexandre Simões

@Refael: sorry mate, I wrote it on the phone. It's proven not to be a good practice :)

Alexandre Simões

Heck... I can^t leave a crappy answer like this :)
You can see it in action here: http://jsfiddle.net/3kNTY/
Here's my code anyway:

var hideThese = ['0.1.5', '2.2.1'];

function hideRows(values) {
    var searchColumnIndex = 0;
    
    $('#myTable tr').each(function (idx, item) {
        var $row = $(item);
        var $cell = $($row.find('td')[searchColumnIndex]);

        if (!$.inArray($cell.html(), values)) $row.hide();
        else $row.show();
    });
}

hideRows(hideThese);

Open in new window

Cheers mate!