How to filter table data using a menu list using jQuery?
I am developing a store directory that displays each store in a row that has table cells with different store information. To help filter the results, I also have a list of store types like Men Fashion, Women Fashion, etc. In basic
<li>--Store Type--</li>
format.
When a user clicks on one of these list items, say Men Fashion, I would like it to filter out all table rows that contain the term Men Fashion and hide those that do not. Some cells in the table will have multiple terms, as some stores sell fashion for men and women, so I would like it to be filtered based on all terms, not just one term.
How would I do this with jQuery?
Here is my list structure
<ul>
<li>Women Fashion</li>
<li>Men Fashion</li>
<li>Shoes & Footwear</li>
<li>Communication & 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 Fashion, Women Fashion, Communication & Technology</span></td>
</tr>
Any help would be greatly appreciated.
source to share
Update: my previous answer used $.grep
, but the best option is filter
:
$(".row").hide().filter(function() {
return $(this).find(".category span").text().indexOf(searchTerm) >= 0;
}).show();
Working example at jsFiddle .
More details:
This selects all rows, hides them and returns the same array
$(".row").hide()
... which will then be passed to filter
(which will filter it with some condition).
$(".row").hide().filter(function() {
// "this" refers to the element being tested
return ...
});
We need lines that have an element with a class category
, and inside it there span
should be the text that we are looking for:
$(this).find(".category span").text().indexOf(searchTerm) >= 0
Finally, the following result items are displayed:
}).show();
source to share