Hide Table Row By Dropdown

I have 2 dropdown menu (Username & Gender) and I have table with 3 columns (username, name, and gender). I want to filter the table based on dropdown value. What must I do ?

Solution 1:

I create this sollution.

html

<selectid="username"class="form-control selectpicker"><optionvalue="">Username</option><optionvalue="">user1</option><optionvalue="">user2</option><optionvalue="">user3</option></select><selectid="gender"class="form-control selectpicker"><optionvalue="">Gender</option><optionvalue="">M</option><optionvalue="">F</option></select><tableclass="dynamicTable tableTools table table-striped table-primary"><!-- Table heading --><thead><tr><th>Username</th><th>Name</th><th>Gender</th></tr></thead><tbody><tr><td>user1</td><td>Jane</td><td>F</td></tr><tr><td>user2</td><td>John</td><td>M</td></tr><tr><td>user3</td><td>Jack</td><td>M</td></tr></tbody><!-- // Table body END --></table>

js

$("#username").on("change",
               function(){
                   var a = $(this).find("option:selected").html();

                   $("table tr td:first-child").each(
                       function(){
                           if($(this).html() != a){
                               $(this).parent().hide();
                           }
                           else{
                               $(this).parent().show();
                           }
                       });
               });

$("#gender").on("change",
               function(){
                   var a = $(this).find("option:selected").html();

                   $("table tr td").each(
                       function(){
                           if($(this).html() != a){
                               $(this).parent().hide();
                           }
                           else{
                               $(this).parent().show();
                           }
                       });
               });

fiddle

Solution 2:

I made a simple script with jQuery (you have to include the jquery library).

HTML:

<selectname="username"class="form-control selectpicker"><optionvalue="">Username</option><optionvalue="">user1</option><optionvalue="">user2</option><optionvalue="">user3</option></select><selectname="gender"class="form-control selectpicker"><optionvalue="">Gender</option><optionvalue="">M</option><optionvalue="">F</option></select></div><tableid="tbl"class="dynamicTable tableTools table table-striped table-primary"><!-- Table heading --><thead><tr><th>Username</th><th>Name</th><th>Gender</th></tr></thead><tbody><tr><td>user1</td><td>Jane</td><td>F</td></tr><tr><td>user2</td><td>John</td><td>M</td></tr><tr><td>user3</td><td>Jack</td><td>M</td></tr></tbody><!-- // Table body END --></table><!-- // Table END -->

Javascript (jQuery):

$(document).ready(function() {
    functioncalculate() {
        $('#tbl tbody tr').show();
        var sel_username = $('select[name="username"] option:selected').text();
        var sel_gender = $('select[name="gender"] option:selected').text();

        if(sel_username == 'Username' && sel_gender == 'Gender') {
            return;
        }

        $('#tbl tbody tr').each(function() {
            var col_username = $(this).find('td').first();
            var col_gender = $(this).find('td').last();

            if(col_username.text() !== sel_username && sel_username !== 'Username') {
                $(this).hide();
            }

            if(col_gender.text() !== sel_gender && sel_gender !== 'Gender') {
                if($(this).is(':visible')) {
                    $(this).hide();
                }
            }
        });
    }

    $('select[name="username"]').change(function() {
        calculate();
    });

    $('select[name="gender"]').change(function() {
        calculate();
    });
});

JSFIDDLE