JQuery表过滤器:多个过滤器
JQuery表过滤器:多个过滤器
提问于 2017-06-26 03:25:36
$('.filterable .filters input').keyup(function(e) {
/* Ignore tab key */
var code = e.keyCode || e.which;
if (code == '9') return;
/* Useful DOM data and selectors */
var $inputs = $('.filters input');
var $input = $(this),
inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');
// $rows.show();
/*reset = false;
if (code == 8 || code == 46) {
$rows.show();
reset = true
}*/
$.each($inputs, function(key, elem) {
value = $(elem).val().toLowerCase();
$rows.filter(function() {
if (value.length > 0 && column == (key + 1)) {
var col_value = $(this).find('td').eq(key + 1).text().toLowerCase();
if (col_value.indexOf(value) === -1) {
$(this).hide();
} /*else if (reset && col_value.indexOf(value) > -1) {
$(this).show();
}*/
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="panel panel-primary filterable" style="width:1500px;">
<div class="panel-heading" id="list_heading"><table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr class="filters">
<th class="thead"><label id="list_header_action">#
</label></th>
<th class="thead"><input type="text" class="form-control" id="list_head_projectname"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_cardtype"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_cardtype"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_creationdate"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_creationdate"></th>
<th class="thead"><label id="list_header_action">ACTION</label></th>
</tr>
</thead>
<tbody>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_2" name="row_check" value="2"></td>
<td> Advait</td>
<td>@home</td>
<td>JACKSON</td>
<td>2017-06-23</td>
<td>Channel,Decision My Loan,Help Me Transition</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/2">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr>
<td><input type="checkbox" id="id_6" name="row_check" value="6"></td>
<td> aslj sd wildfm wep</td>
<td>Campaign</td>
<td>PARTNER</td>
<td>2017-06-23</td>
<td>Assist Me with Options,Channel,Help Me Find a Solution</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/6">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_3" name="row_check" value="3"></td>
<td> gfg hkj;h oi uvmvgh</td>
<td>Campaign</td>
<td>MCCLAIN</td>
<td>2017-06-23</td>
<td>Capital Markets,Decision My Loan,Help Me Transition</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/3">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_4" name="row_check" value="4"></td>
<td> jhgj gklk; mn nbvg tfc kg hj</td>
<td>Campaign</td>
<td>PARTNER:OPEN</td>
<td>2017-06-23</td>
<td>Decision My Loan,Help Me Transition,Manage My Loan</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/4">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_1" name="row_check" value="1"></td>
<td> Kishor</td>
<td>@home</td>
<td>DICKEY</td>
<td>2017-06-23</td>
<td>Decision My Loan,Internal Customer</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/1">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_7" name="row_check" value="7"></td>
<td> ksld laksdj oiweiom</td>
<td>@home</td>
<td>PARTNER:PALAZZO</td>
<td>2017-06-23</td>
<td>Capital Markets,Channel,Decision My Loan</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/7">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_5" name="row_check" value="5"></td>
<td> lkjhkj gy f ftyroutybch hg fl</td>
<td>@home</td>
<td>DICKEY</td>
<td>2017-06-23</td>
<td>Channel,Decision My Loan,Help Me Transition</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/5">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
我有以上的html和js。我希望基于多列的多个值实现表筛选器。当字符被输入到列标题中时，我能够过滤行，但在删除字符时不能这样做。
当输入字符时，我将display : none添加到非匹配行，并且在删除字符时无法显示它们。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-06-26 05:15:10
若要解决此问题，请在代码中添加以下行。
$rows.show();在应用筛选器选项之前添加此代码。你可以在这个街区之后加起来。
inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');
$('.filterable .filters input').keyup(function(e) {
/* Ignore tab key */
var code = e.keyCode || e.which;
if (code == '9') return;
/* Useful DOM data and selectors */
var $inputs = $('.filters input');
var $input = $(this),
inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');
$rows.show();
/*reset = false;
if (code == 8 || code == 46) {
$rows.show();
reset = true
}*/
$.each($inputs, function(key, elem) {
value = $(elem).val().toLowerCase();
$rows.filter(function() {
if (value.length > 0) {
var col_value = $(this).find('td').eq(key + 1).text().toLowerCase();
if (col_value.indexOf(value) === -1) {
$(this).hide();
} /*else if (reset && col_value.indexOf(value) > -1) {
$(this).show();
}*/
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="panel panel-primary filterable" style="width:1500px;">
<div class="panel-heading" id="list_heading"><table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr class="filters">
<th class="thead"><label id="list_header_action">#
</label></th>
<th class="thead"><input type="text" class="form-control" id="list_head_projectname"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_cardtype"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_cardtype"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_creationdate"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_creationdate"></th>
<th class="thead"><label id="list_header_action">ACTION</label></th>
</tr>
</thead>
<tbody>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_2" name="row_check" value="2"></td>
<td> Advait</td>
<td>@home</td>
<td>JACKSON</td>
<td>2017-06-23</td>
<td>Channel,Decision My Loan,Help Me Transition</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/2">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr>
<td><input type="checkbox" id="id_6" name="row_check" value="6"></td>
<td> aslj sd wildfm wep</td>
<td>Campaign</td>
<td>PARTNER</td>
<td>2017-06-23</td>
<td>Assist Me with Options,Channel,Help Me Find a Solution</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/6">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_3" name="row_check" value="3"></td>
<td> gfg hkj;h oi uvmvgh</td>
<td>Campaign</td>
<td>MCCLAIN</td>
<td>2017-06-23</td>
<td>Capital Markets,Decision My Loan,Help Me Transition</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/3">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_4" name="row_check" value="4"></td>
<td> jhgj gklk; mn nbvg tfc kg hj</td>
<td>Campaign</td>
<td>PARTNER:OPEN</td>
<td>2017-06-23</td>
<td>Decision My Loan,Help Me Transition,Manage My Loan</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/4">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_1" name="row_check" value="1"></td>
<td> Kishor</td>
<td>@home</td>
<td>DICKEY</td>
<td>2017-06-23</td>
<td>Decision My Loan,Internal Customer</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/1">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_7" name="row_check" value="7"></td>
<td> ksld laksdj oiweiom</td>
<td>@home</td>
<td>PARTNER:PALAZZO</td>
<td>2017-06-23</td>
<td>Capital Markets,Channel,Decision My Loan</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/7">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_5" name="row_check" value="5"></td>
<td> lkjhkj gy f ftyroutybch hg fl</td>
<td>@home</td>
<td>DICKEY</td>
<td>2017-06-23</td>
<td>Channel,Decision My Loan,Help Me Transition</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/5">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44752740
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号