jQuery - How to filter rows onclick?

Question

I'm trying to figure out how to filter a table based on the row class when I click a button. I've been looking at various jquery plugins, but none of them seem to do what I need it to do. Some have textboxes that filter, etc., and I've tried adapting the code but frankly, I'm just making a great big mess... Help? I have a table that looks like this:

<table>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
</table>

And I have three buttons:

<input type="button" name="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" name="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" name="filtermr" /> <!-- clicking this will only show rows with mr class -->

Greg · Accepted Answer · 2009-11-07 16:57:48Z

4

Something like this might do the trick:

$('input[type=button]').click(function()
{
    $('tr').hide()
        .filter('.' + this.name.replace(/filter/, '')).show();
});

Adding an ID to your table would be a good idea.

answered Nov 7, 2009 at 16:57

Greg

323k55 gold badges378 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quintin Robinson · Accepted Answer · 2009-11-07 16:56:45Z

3

You could do something like below respectively for each button click, it should work out.

$("tr:not(.dr)").hide();
$("tr.dr").show();

IE:

$(document).ready(function(){
    $(":button[name='filterdr']").click(function(){
        $("tr:not(.dr)").hide();
        $("tr.dr").show();
    });
});

answered Nov 7, 2009 at 16:56

Quintin Robinson

82.6k14 gold badges128 silver badges132 bronze badges

Comments

Soufiane Hassou · Accepted Answer · 2009-11-07 16:57:38Z

0

<input type="button" id="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" id="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" id="filtermr" /> <!-- clicking this will only show rows with mr class -->

JQuery:

$('#filterdr').click(function() { 
   $('table tr').hide();
   $('table tr.dr').show();
});

and You do the same for the other buttons.

answered Nov 7, 2009 at 16:57

Soufiane Hassou

17.8k2 gold badges42 silver badges76 bronze badges

Comments

David Robbins · Accepted Answer · 2009-11-07 17:17:14Z

0

DataTables does exactly what you need:

Column or row filtering
Event Handling for on row creation
Filtering for all columns from a single Search textbox
Multicolumn sorting
Editable Rows

I've used this on production projects and some cases I've elected to use DataTables over Telerik RadGrad. It's very flexible and great for RIA.

answered Nov 7, 2009 at 17:17

David Robbins

10.1k7 gold badges55 silver badges83 bronze badges

Collectives™ on Stack Overflow

jQuery - How to filter rows onclick?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related