[英]Hide table row by dropdown
我有2個下拉菜單(用戶名和性別),並且我的表有3列(用戶名,名稱和性別)。
我想根據下拉值過濾表。 我必須做什么 ?
這是代碼:
<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();
}
});
});
我使用jQuery創建了一個簡單的腳本(您必須包括jquery庫)。
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();
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.