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&lt;/td&gt;
</tr>
<tr>
    <td>John</td>
    <td>Doe</td>
    <td>$2776.09</td>
    <td>119.232.182.142</td>
    <td>http://www.example.com&lt;/td&gt;
</tr>

How would I go about filtering the table using jQuery?

Answer 1

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();
                    }
             });
       });
});

Answer 2

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();

Answer 3

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();
      }
     });
    });
});

Answer 4

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.

Answer 5

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

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

Answer 6

Hi, Could someone please post the html part? Thank you.