[英]Filter table in jQuery? or angularJS
我希望能够过滤我的表格,表格是这样的
name | date | agencyID
test 2016-03-17 91282774
test 2016-03-18 27496321
我希望有一个带有所有'agencyID'的下拉列表,当我选择它时,仅显示带有该agencyID的表行。我有类似的事情,您可以在输入类型的文本中搜索任何内容。
这是该部分的工作方式,是否可以通过选择下拉菜单执行类似的方式?
(function ($) {
$('#filter').keyup(function () {
var rex = new RegExp($(this).val(), 'i');
$('.searchable tr').hide();
$('.searchable tr').filter(function () {
return rex.test($(this).text());
}).show();
})
}(jQuery));
如果这是更好的选择,我愿意实施angularJS
您可以在选择下拉菜单上执行on change处理程序。
的HTML:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<select id="filter">
<option value="">Choose a filter</option>
<option value="1231423424">1231423424</option>
<option value="456456e54">456456e54</option>
<option value="123488745">123488745</option>
</select>
<table id="searchable">
<tr>
<th>name</th>
<th>date</th>
<th>agencyID</th>
</tr>
<tr>
<td>test 1</td>
<td>date 1</td>
<td>1231423424</td>
</tr>
<tr>
<td>test 2</td>
<td>date 2</td>
<td>456456e54</td>
</tr>
<tr>
<td>test 3</td>
<td>date 3</td>
<td>456456e54</td>
</tr>
<tr>
<td>test 4</td>
<td>date 4</td>
<td>123488745</td>
</tr>
<tr>
<td>test 5</td>
<td>date 5</td>
<td>123488745</td>
</tr>
</table>
Javascript:
$(document).ready(function(){
$('#filter').change(function(){
var filterValue = $(this).val();
if(filterValue==""){
$("#searchable tr").show();
} else{
$("#searchable tr").hide();
$("#searchable td:nth-child(3)").each(function(){
if( $(this).text() == filterValue){
$(this).parent().show();
}
});
}
});
});
这是使用:contains()选择器的另一种实现
$select.on('change', function(){
$('.highlight').removeClass('highlight');
var id = $(this).val();
$('table').find("tr:contains('"+id+"')").addClass('highlight');
});
您可以在tr中添加代表代理商的ID
<select id="select">
<option value=""></option>
<option value="91282774">91282774</option>
<option value="27496321">27496321</option>
</select>
<table id="mytable">
<tr><th>name</th><th>data</th><th>agency</th></tr>
<tr id="91282774"><td>test</td><td>2016-03-17</td><td>91282774</td></tr>
<tr id="27496321"><td>test</td><td>2016-03-18</td><td>27496321</td></tr>
</table>
并在更改选择时搜索ID
$(document).ready(function(){
$("#select").change(function(){
var value = $(this).val();
if(value == "")
$("#mytable tr").show();
else{
$("#mytable tr[id=" + value + "]").show();
$("#mytable tr[id][id!=" + value + "]").hide();
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.