jquery - Show or Hide Table rows based on drop down selection -
i have table has got sector column under .
on changing sector column , using drop down need show / hide rows corresponding sector
this code
html code
<table class="table table-striped marg_none tablesorter tablesorter-blackice" id="mytable" role="grid"> <tbody id="positivebody" aria-live="polite" aria-relevant="all"> <tr class="greencolor" role="row"> <td class="text-center"> <label for="ibrealest" class="marg_none"> <div></div> </label> </td> <td class="greencolor">jublfood</td> <td>99.15</td> <td>108.25</td> <td>cnx fmcg</td> </tr> <tr class="greencolor" role="row"> <td class="text-center"> <label for="den" class="marg_none"> <div></div> </label> </td> <td class="greencolor">tcs</td> <td>90</td> <td>103.4</td> <td>cnx it</td> </tr> <tr class="redcolor" role="row"> <td class="text-center"> <label for="raymond" class="marg_none"> <div></div> </label> </td> <td class="redcolor">infy</td> <td>631.7</td> <td>654</td> <td>cnx it</td> </tr> </tbody> </table> <select id="sectors"> <option value="none">-- select --</option> <option value="cnx it">cnx it</option> <option value="cnx fmcg">cnx fmcg</option> </select> on drop down change
$(document).ready(function(){ $("#sectors").change(function(){ var textselected = document.getelementbyid("sectors").value ; var tr = $('#mytable tbody tr'); tr.hide(); tr.filter(function() { return +$('td:eq(3)', this).text(); }).show(); }); }); this fiddle
this may try this.
$("#username").on("change", function(){ var = $(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 = $(this).find("option:selected").html(); $("table tr td").each( function(){ if($(this).html() != a){ $(this).parent().hide(); } else{ $(this).parent().show(); } }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="username" class="form-control selectpicker"> <option value="">username</option> <option value="">user1</option> <option value="">user2</option> <option value="">user3</option> </select> <select id="gender" class="form-control selectpicker"> <option value="">gender</option> <option value="">m</option> <option value="">f</option> </select> <table 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>
Comments
Post a Comment