How to filter table data with a menu list using jQuery?

Question

I'm developing a store directory that displays each store in a row that has table cells with various store information. To help filter the results, I also have a list of store types such as Men's Fashion, Women's Fashion etc in a basic

<li>--Store Type--</li> 

format.

When a user clicks on one of these list items, say Men's Fashion, I'd like it to filter all of the table rows containing the term Men's Fashion, and hide the ones that do not have this term. Some table cells will have multiple terms as some stores sell both Men's and Women's fashion, so I'd like for it to filter based on all of the terms and not just a single term.

How would I go about doing this using jQuery?

Here is my list structure

<ul>
   <li>Women's Fashion</li>
   <li>Men's Fashion</li>
   <li>Shoes &amp; Footwear</li>
   <li>Communication &amp; Technology</li>
</ul>

Here is my table structure

<tr class="row" data="">
   <td class="name list-background-dark">Ted Baker<img class="store-logo" src="Logo.jpg" alt="Ted Baker" title="Ted Baker"></td>
   <td class="location list-background-dark"><span class="location-image-dark">Level 1</span></td>
   <td class="numeric number"><span class="telephone-dark">5555555</span></td>
   <td class="category"><span class="category-dark">Men's Fashion, Women's Fashion, Communication &amp; Technology</span></td>
</tr>

Any help would be greatly appreciated.

Answer 1

Update: my previous answer used $.grep, but a better option is filter:

$(".row").hide().filter(function() {
    return $(this).find(".category span").text().indexOf(searchTerm) >= 0;
}).show();

Working example at jsFiddle.

Details:

This selects all rows, hide them, and returns the same array

$(".row").hide()

... which will then be passed to filter (which will filter it by some condition).

$(".row").hide().filter(function() {
    // "this" refers to the element being tested
    return ...
});

What we want are rows that have an element with the category class, and inside its span there should be the text we're looking for:

$(this).find(".category span").text().indexOf(searchTerm) >= 0

Last, the resulting elements are shown:

}).show();