Question

190

jQuery Table Row Filtering by Column

rated 0 times [ 193] [ 3] / answers: 1 / hits: 48827 / 14 Years ago, wed, august 11, 2010, 12:00:00

I'm trying to filter table rows in an intelligent way (as opposed to just tons of code that get the job done eventually) but a rather dry of inspiration.

I have 5 columns in my table. At the top of each there is either a dropdown or a textbox with which the user may filter the table data (basically hide the rows that don't apply)

There are plenty of table filtering plugins for jQuery but none that work quite like this, and thats the complicated part :|

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zaynerogerb

Add To Favorites

Follow

Total Points: 454

Total Questions: 109

Total Answers: 97

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

zaynerogerb questions

1 Error: Caching was left unconfigured. Babel's plugins when I installed Font Awesome to my react app

Fri, Mar 4, 22, 00:00, 2 Years ago

1 Cannot import Popper.js in VueJS

Sat, Sep 5, 20, 00:00, 4 Years ago

1 Framer Motion exit animation not firing on accordion with react-router-dom

Wed, Aug 12, 20, 00:00, 4 Years ago

1 How to use Behaviorsubject to detect change

Fri, May 8, 20, 00:00, 4 Years ago

1 How to solve DELETE error 404 not found express.js

Mon, Apr 6, 20, 00:00, 4 Years ago

View All

answered 14 Years ago janjadonb · Accepted Answer

Here is a basic filter example http://jsfiddle.net/urf6P/3/

It uses the jquery selector :contains('some text') and :not(:contains('some text')) to decide if each row should be shown or hidden. This might get you going in a direction.

EDITED to include the HTML and javascript from the jsfiddle:

$(function() {    

    $('#filter1').change(function() { 

        $(#table td.col1:contains(' + $(this).val() + ')).parent().show();

        $(#table td.col1:not(:contains(' + $(this).val() + '))).parent().hide();

    });



});