如何使用jQuery为表格制作下拉列表过滤器? [英] How to make dropdown list filter for a table using jQuery?
问题描述
我想在特殊列中制作下拉表过滤器，例如我想为已婚"列制作过滤器&从下拉列表中选择是或否，这是我的表:
I want to make dropdown table filter in special columns, for example I want to make a filter for the "Married" Column & select yes or or no from the dropdown,this is my table:
我需要一个 jquery 代码来帮助我制作过滤器.
I need a jquery code to help me to make the filter.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table id="table_format" class="table table-bordered table-striped table-hover table-list-search">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Maried</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>yes</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>no</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>yes</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>no</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>no</td>
</tr>
</tbody>
</table>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/filter.js"></script>推荐答案
试试这个 - 使用正则表达式和 jQuery 过滤器函数根据 onchange 的选择列表过滤结果(使用添加到 tr 的类来控制显示).这也可以在文本输入版本中用于实时过滤任何内容的任何表格行，以便您可以输入人名等并让过滤器功能仅显示匹配的名称.
Try this - uses a regex and jQuery filter function to filter the results based on the select list onchange (using an added class to the tr's to control display). This can also be used in a text input version to live filter any of the table rows for any content so that you can type in peoples names etc and get the filter function to show only the matching names.
我还添加了一个全部"选项以再次显示所有 tr(有效地移除过滤器).请注意，它只是隐藏了不匹配的行，这意味着表格的条纹方面不一定会按需要显示，但是当我实现这样的东西时 - 我还添加了一个函数，根据数量重新条纹表格应用过滤器后的行和奇数/偶数等 - 从而重新划分表格显示.
I also put an 'all' option in to show all tr's again (effectively removinmg the filter). Note that it simply hides the non-matching rows, meaning that the striped aspect of the table will not necessarily display as desired, but when I implemented something like this - I also added a function that re-striped the table based on the number of rows and odd / even etc AFTER the filter was applied - thereby re-striping the table display.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Filter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
</head>
<body>
<table id="table_format" class="table table-bordered table-striped table-hover table-list-search">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Married
<select id='filterText' style='display:inline-block' onchange='filterText()'>
<option disabled selected>Select</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
<option value='all'>All</option>
</select>
</th>
</tr>
</thead>
<tbody id="myTable">
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>yes</td>
</tr>
<tr class="content">
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>no</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>yes</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>no</td>
</tr>
<tr class="content">
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>no</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function filterText()
{
var rex = new RegExp($('#filterText').val());
if(rex =="/all/"){clearFilter()}else{
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter()
{
$('.filterText').val('');
$('.content').show();
}
</script>
</body>
</html>这篇关于如何使用jQuery为表格制作下拉列表过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
