我正在寻找一种使用Javascript过滤表格的方法。虽然下面的代码片段是通过使用所有表格的单元格内容进行过滤的,但我正在寻找一种方法来指定一个条件(index = 1),或者仅通过使该函数仅搜索“Index”。
搜索功能由keyup触发。 queryString下面的函数从另一侧获取一个ID,并且应该预先过滤该表。有没有办法预先/重新触发搜索功能?
$(document).ready(function() {
$("#search").keyup(function () {
var searchTerm = $("#search").val();
var listItem = $('.results tbody').children('tr');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
$.extend($.expr[':'], {'containsi': function(elem, i, match, array){
return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
$(this).attr('visible','false');
});
$(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
$(this).attr('visible','true');
});
// Search Count item hits
var jobCount = $('.results tbody tr[visible="true"]').length;
$('.counter').text(jobCount + ' item');
if(jobCount == '0') {$('.no-result').show();}
else {$('.no-result').hide();}
});
// Parameter Passing
var queryString = new Array();
$(function() {
if (queryString.length == 0) {
if (window.location.search.split('?').length > 1) {
var params = window.location.search.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var key = params[i].split('=')[0];
var value = decodeURIComponent(params[i].split('=')[1]);
queryString[key] = value;
}
}
}
if (queryString["id"] != null) {
$('#search').val(queryString["id"])
}
});
});
.results tr[visible='false'],
.no-result{
display:none;
}
.results tr[visible='true']{
display:table-row;
}
.counter{
padding:8px;
color:#ccc;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group pull-right">
<input type="text" class="form-control" id="search" placeholder="search">
</div>
<span class="counter pull-right"></span>
<table class="table table-condensed table-hover results">
<thead>
<tr>
<th>Index</th>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr class="warning no-result">
<td colspan="4"><i class="fa fa-warning"></i> No result</td>
</tr>
</thead>
<tbody>
<tr>
<td>112</td>
<td>Content112</td>
<td>Content2</td>
<td>Content329</td>
</tr>
<tr>
<td>123</td>
<td>SomeOtherContent112</td>
<td>SomeOtherContent123</td>
<td>SomeOtherContent3</td>
</tr>
<tr>
<td>329</td>
<td>CompletelyDifferentContent123</td>
<td>CompletelyDifferentContent2</td>
<td>CompletelyDifferentContent329</td>
</tr>
</tbody>
</table>