Filter table from <select> input using jQuery

Question

I'm trying to filter a table from an alphabetical <select> input with jQuery.

I have first and last names in two columns of the table, and I'd like to filter the rows by either of these.

I have a select input set up as so:

<select>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    ...
</select>

and I'd like to filter this table:

<tr>
    <td>Joe</td>
    <td>Schmoe</td>
    <td>$2482.79</td>
    <td>172.78.200.124</td>
    <td>http://gmail.com</td>
</tr>
<tr>
    <td>John</td>
    <td>Doe</td>
    <td>$2776.09</td>
    <td>119.232.182.142</td>
    <td>http://www.example.com</td>
</tr>

How would I go about filtering the table using jQuery?

howardr · Accepted Answer · 2009-07-08 19:52:22Z

6

This will work assuming you only have one select and one table that is stuctured like your example

$(document).ready(function($) {
    var rows = $('table tr').each(function() {
        var row = $(this);
        var columns = row.children('td');

        row.data('name-chars', [
            columns.eq(0).html()[0].toUpperCase(),
            columns.eq(1).html()[0].toUpperCase(),
        ]);
    });

    $('select').change(function() {
        var char = $(this).val().toUpperCase();

        rows.each(function() {
            var row = $(this);
            var chars_to_match = row.data('name-chars');
            if($.inArray(char, chars_to_match) > -1) {
                row.show();
            }
            else {
                row.hide();
            }
        });
    });
});

edited Jul 8, 2009 at 19:52

answered Jul 8, 2009 at 19:46

howardr

3331 silver badge6 bronze badges

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

4 Comments

peehskcalba Over a year ago

Excellent! Now how could I include an <option> to show all rows?

SolutionYogi Over a year ago

Add first option as 'All' and in the change function if the value is 'All', do $('table tr').show() and you are done.

SolutionYogi Over a year ago

Why are you storing the first two characters using 'data' method for each row? If you are going to iterate through all the rows, you might as well get this first two characters on demand.

Gordon Over a year ago

awesome function, used this for my scripts!

seth · Accepted Answer · 2009-07-08 20:59:02Z

I came up with this. Pretty similar to what Elzo came up with but it limits it to the first two columns of the table.

 $('select').change( function(e) { 
   var letter = $(this).val();
     if (letter === 'ALL') {
         $ ('tr').show ();
     }
     else {
         $('tr').each( function(rowIdx,tr) {
             $(this).hide().find('td').each( function(idx, td) {
                 if( idx === 0 || idx === 1) {
                     var check = $(this).text();
                     if (check && check.indexOf(letter) == 0) {
                         $(tr).show();
                     }
                 }
             });             

         });
     }             
 });

It doesn't ignore case and assumes you have one select and the only tr's on the page are the ones you want to filter.

EDIT Added an 'ALL' option to show rows again.

AKX · Accepted Answer · 2009-07-08 19:41:25Z

0

If the id of your table is sel, and the table is tab, this will do the trick. Change eq(0) to change the column to look in. An empty value in the select box will re-show all trs.

var selSelection = $("#sel").val();
if(!selSelection) $("#tab tr").show();
else $("#tab tr").show().filter(function(index){
    return $("td:eq(0)", this).html().indexOf(selSelection) == -1;
}).hide();

answered Jul 8, 2009 at 19:41

AKX

171k16 gold badges147 silver badges229 bronze badges

Comments

webwires · Accepted Answer · 2009-07-08 19:58:41Z

0

$("td:not(:contains('" + input_value + "'))").remove();

This is case sensitive ... what specifically are you attempting to filter on?

answered Jul 8, 2009 at 19:58

webwires

1,9073 gold badges26 silver badges47 bronze badges

Comments

Elzo Valugi · Accepted Answer · 2009-07-08 22:46:26Z

0

Try this. If necessary substitute y with $(y).

$('tr').hide();
$('select').change( function(){
    var letter = $(this).val();
    var dataset = $('#tableID').find('td');
    $.each(dataset, function(x, y){
        if( y.substr(0,1) == letter){
            y.parent().show();
        }
    });
});

Edit

@SolutionYogi. You are right. I guess this line can be rewriten as:

var dataset = $('#tableID').find('tr').children('td').slice(0,1);

Never tried that though.

EDIT 2

I tested this. I hope is elegant enough as well and I doesn't have more errors.

$('tr').hide();
$('select').change( function(){
    var letter = $(this).val();
    var dataset = $('#tableID').find('tr');
        $.each(dataset, function(x, y){
            var data = $(y).children().slice(0,2);
                $.each(data, function(a, b){
                    if( $(b).html().substr(0,2) == letter){
                        $(b).parent().show();
                    }
             });
       });
});

edited Jul 8, 2009 at 22:46

answered Jul 8, 2009 at 19:37

Elzo Valugi

28.1k17 gold badges97 silver badges115 bronze badges

5 Comments

SolutionYogi Over a year ago

Your code searches all the columns whereas the author wants to search only first two columns.

SolutionYogi Over a year ago

Won't that code only search the first two cells of the first row?

Elzo Valugi Over a year ago

You are right again. I'll try to find another solution so you wont parse the whole td set.

SolutionYogi Over a year ago

Author wants to search first two letters where as you match only one character.

Elzo Valugi Over a year ago

I modified to substr(0,2). This code is more like a concept to solve a problem then writing code for people. People must be able to change, understand and adapt the code that we are presenting here, otherwise the outcome is futile. True?

Collectives™ on Stack Overflow

Filter table from <select> input using jQuery

5 Answers 5

4 Comments

Comments

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related