按下拉菜单隐藏表格 [英] Hide table row by dropdown
本文介绍了按下拉菜单隐藏表格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有2个下拉菜单(用户名和性别),并且我的表有3列(用户名,名称和性别).
我想根据下拉值过滤表.我必须做什么 ?
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 ?
这是代码:
<select class="form-control selectpicker">
<option value="">Username</option>
<option value="">user1</option>
<option value="">user2</option>
<option value="">user3</option>
</select>
<select class="form-control selectpicker">
<option value="">Gender</option>
<option value="">M</option>
<option value="">F</option>
</select>
</div>
<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>
<!-- // Table END -->
推荐答案
我创建了此解决方案.
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();
}
});
});
这篇关于按下拉菜单隐藏表格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文