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
<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>
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();
}
});
});
Solution 2:
I made a simple script with jQuery (you have to include the jquery library).
HTML:
<select name="username" class="form-control selectpicker">
<option value="">Username</option>
<option value="">user1</option>
<option value="">user2</option>
<option value="">user3</option>
</select>
<select name="gender" class="form-control selectpicker">
<option value="">Gender</option>
<option value="">M</option>
<option value="">F</option>
</select>
</div>
<table id="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() {
function calculate() {
$('#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();
});
});
Post a Comment for "Hide Table Row By Dropdown"