Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Filter table rows with jquery

Tags:

jquery

filter

row

I would like to know how to filter table rows based on a column value. Plugins excluded, I would like to figure it out how to make this thing to work.

like image 956
mko Avatar asked Oct 31 '11 07:10

mko


People also ask

What is data filter in HTML?

If records in an array have fields that differentiate products with different criteria, data-filter allows you to display only records that meet your criteria.

What is a table filter?

Every table created must have a filter (filter is used interchangeably with base). The filter is the set of qualifications that must be met for a case to be included in the table. The filter is typically shown as a table's first row.


1 Answers

Your question is quite vague, but the general idea would be something like this:

$("td").filter(function() {
    return $(this).text().indexOf("whatever") !== -1;
}).parent().remove();

Here's a working example. It first selects all table cells, then filters them based on some text, and removes the parent (which should be the tr) of any remaining rows.

If you don't care about individual columns, you can select the tr elements and get rid of the call to parent. That will still work because text will return the text of all the children of the selected tr.

Update based on comments

The above will remove the matching table rows from the DOM completely. If you want to just hide them, you can replace remove with hide. If you then wanted to make the rows visible again you could simply do something like:

$("tr").show();

Which selects all the tr elements and shows them (ones that are already visible will not be affected, so just the ones previously hidden will become visible again).

like image 139
James Allardice Avatar answered Sep 20 '22 10:09

James Allardice