我创建了一个固定的左列表,并希望合并一个搜索,显示特定列而不是行。
到目前为止,我只发现了显示该行的内容: How to perform a real time search and filter on a HTML table
但由于我的标题在列中,因此这种方法效果不佳。
顺便说一句,我几乎是一个javascript noob,所以忍受我..:p请查看我的codepen,它显示了我正在尝试做的事情。 http://codepen.io/genemiester/pen/qZrpgZ
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
希望这很清楚?在此先感谢您的帮助!
答案 0 :(得分:0)
试试这个,我希望这是你的目标
var $rows = $('table tbody tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
var regular_expression = new RegExp(escapeRegExp(val));
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !text.match(regular_expression);
}).hide();
});
function escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search">
<table>
<tbody>
<tr>
<td>google</td>
<td>Bing</td>
<td>Search Engine</td>
</tr>
<tr>
<td>Opera</td>
<td>Chrome</td>
<td>FireFox</td>
</tr>
</tbody>
</table>
答案 1 :(得分:0)
更新了表格过滤器:
过滤截图中显示的数据。
我刚刚将JS代码表更改为 Div ,有些人做了一些css更改。
一旦检查了演示。
$(document).ready(function() {
$("#clearsearch").click(function() {
$("#clearsearch").fadeOut(300);
$("#search").val("");
$("#contentsearch div span").removeClass('success');
$("#contentsearch div").removeClass('hide');
});
$("#search").keyup(function() {
var result = $(this).val().replace(/ +?/g, "").toLowerCase();
if (result != null && result != "") {
$("#clearsearch").fadeIn(300);
$("#contentsearch div").addClass('hide');
$("#contentsearch div").find('span').each(function() {
var tbresult = $(this).text().replace(/ +?/g, "").toLowerCase();
if (tbresult.indexOf(result) !== -1) {
$(this).closest('div').removeClass('hide');
$(this).addClass('success');
} else {
$(this).removeClass('success');
}
});
} else {
$("#clearsearch").fadeOut(300);
$("#contentsearch div").removeClass('hide');
$("#contentsearch div span").removeClass('success');
}
});
});
.gap{ height: 10px;}
.hide{dispaly: none;}
#search{ padding-right: 15px;}
.form-group span{ position: relative; left: -24px; top: 3px; cursor: pointer; display: none;}
.form-group span:hover{ color: red;}
.success{
background-color: #dff0d8;
}
.tableheads, #contentsearch div{
border: 1px solid #ddd;
box-shadow: 1px 0px 0px 0px rgba(221,221,221,1);
float: left;
display: inline-block;
}
.tableheads span, #contentsearch div span{
padding: 8px;
display: block;
float: none;
border-bottom: 1px solid #ddd;
}
.tableheads span{
background-color: #f5f5f5;
}
.no-border-bottom{
border-bottom: none !important;
}
.no-border-right{
border-right: none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="clearfix gap">
</div>
<div class="form-inline">
<div class="form-group">
<label>Search :
</label>
<input type="text" class="form-control" name="search" id="search" placeholder="Search">
<span id="clearsearch" class="glyphicon glyphicon-remove">
</span>
</div>
</div>
<div class="clearfix gap">
</div>
<div class="tableheads no-border-right">
<span>Name
</span>
<span>State
</span>
<span class="no-border-bottom">Location
</span>
</div>
<div id="contentsearch">
<div class="no-border-right">
<span>John
</span>
<span>Telangana
</span>
<span class="no-border-bottom">Hyderabad
</span>
</div>
<div class="no-border-right">
<span>Nathaniel
</span>
<span>Andhrapradesh
</span>
<span class="no-border-bottom">Vijag
</span>
</div>
<div class="no-border-right">
<span>Charles
</span>
<span>Tamilnadu
</span>
<span class="no-border-bottom">Chennai
</span>
</div>
<div class="no-border-right">
<span>Christian
</span>
<span>Karnataka
</span>
<span class="no-border-bottom">Bangalore
</span>
</div>
</div>
<div class="clearfix gap">
</div>
</div>
</div>
表格 - 搜索演示:
以前的演示有很棒的表格搜索选项。
$(document).ready(function() {
$("#clearsearch").click(function() {
$("#clearsearch").fadeOut(300);
$("#search").val("");
$("#tablecontent tbody tr td").removeClass('success');
$("#tablecontent tbody tr").removeClass('hide');
});
$("#search").keyup(function() {
var result = $(this).val().replace(/ +?/g, "").toLowerCase();
if (result != null && result != "") {
$("#clearsearch").fadeIn(300);
$("#tablecontent tbody tr").addClass('hide');
$("#tablecontent tbody tr").find('td').each(function() {
var tbresult = $(this).text().replace(/ +?/g, "").toLowerCase();
if (tbresult.indexOf(result) !== -1) {
$(this).closest('tr').removeClass('hide');
$(this).addClass('success');
} else {
$(this).removeClass('success');
}
});
} else {
$("#clearsearch").fadeOut(300);
$("#tablecontent tbody tr").removeClass('hide');
$("#tablecontent tbody tr td").removeClass('success');
}
});
});
.gap{
height: 10px;
}
.hide{
dispaly: none;
}
#search{
padding-right: 15px;
}
.form-group span{
position: relative;
left: -24px;
top: 3px;
cursor: pointer;
display: none;
}
.form-group span:hover{
color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="clearfix gap"></div>
<div class="form-inline">
<div class="form-group">
<label>Search :</label>
<input type="text" class="form-control" name="search" id="search" placeholder="Search">
<span id="clearsearch" class="glyphicon glyphicon-remove"></span>
</div>
</div>
<div class="clearfix gap"></div>
<table id="tablecontent" class="table table-bordered">
<thead>
<tr class="active">
<th>S.No.</th>
<th>Name</th>
<th>Country</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>India</td>
<td>Hyderabad</td>
</tr>
<tr>
<td>2</td>
<td>Nathaniel</td>
<td>India</td>
<td>Mumbai</td>
</tr>
<tr>
<td>3</td>
<td>Charles</td>
<td>India</td>
<td>Pune</td>
</tr>
<tr>
<td>4</td>
<td>Christian</td>
<td>India</td>
<td>Secunderabad</td>
</tr>
</tbody>
</table>
</div>
</div>