How to filter all data in unstructured table with select in jquery

Question

i have table that have different data in every tr and td, so question is how i filter data in that table. Example of Code Structure -

<table id="tableID">
      <tr>
        <td>mar a</td>
        <td>june c</td>
        <td>aug g</td>
        <td>may f</td>
      </tr>
      <tr>
        <td>jan z</td>
        <td>june a</td>
        <td>dec f</td>
        <td>nov e</td>
      </tr>
      <tr>
        <td>b</td>
        <td>y</td>
        <td>a</td>
        <td>aug c</td>
      </tr>
      <tr>
        <td>n</td>
        <td>b</td>
        <td>g</td>
        <td>july a</td>
      </tr>
</table>

and i make want to filter table with select options.

<select id="sel" name="sel">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="e">e</option>
        <option value="f">f</option>
        <option value="g">g</option>
        <option value="z">z</option>
</select>

here is js script

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

how i filter all a in this table. I'm also use tablesorter and all jquery plugin that i know but they only filter column or row.

as i'm newbie in js so please ignore my faults...

and thanks in advance

possible duplicate of [Filtering Table rows using Jquery](http://stackoverflow.com/questions/17074687/filtering-table-rows-using-jquery) — boszlo, Jul 24 '15 at 12:30

score 0 · Answer 1 · answered Jul 24 '15 at 12:33

0

use jquery .each() function to get all td's text and save their text in jquery array and use sort() function to sort array.After that use array data to crate html select

answered Jul 24 '15 at 12:33

Muhammad Atif

1,050
1
9
21

score 0 · Answer 2 · answered Jul 24 '15 at 12:37

You can use something like this (given the html you posted):

$('#sel').on('change', function(){
    var selectedValue = $(this).val();
    $('#tableID').find('td').each(function(){
        if ($(this).text() === selectedValue)
        {
            $(this).show();
        }
        else
        {
            $(this).hide();
        }
    });
});

Here's an example: http://jsfiddle.net/u4u36f0k/

How to filter all data in unstructured table with select in jquery

2 Answers2