如何使用 jQuery 为表格制作下拉列表过滤器？
Posted
技术标签:
【中文标题】如何使用 jQuery 为表格制作下拉列表过滤器？【英文标题】：How to make dropdown list filter for a table using jQuery? 【发布时间】：2016-06-16 17:00:16 【问题描述】：我想在特殊列中制作下拉表过滤器，例如我想为“已婚”列制作过滤器并从下拉列表中选择是或否，这是我的表：
我需要一个 jquery 代码来帮助我制作过滤器。
<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>【问题讨论】：
【参考方案1】：试试这个 - 使用正则表达式和 jQuery 过滤器函数根据选择列表 onchange 过滤结果（使用添加到 tr 的类来控制显示）。这也可以在文本输入版本中用于实时过滤任何内容的任何表格行，以便您可以输入人名等并获取过滤功能以仅显示匹配的名称。
我还添加了一个“全部”选项以再次显示所有 tr（有效地删除了过滤器）。请注意，它只是隐藏了不匹配的行，这意味着表格的条纹方面不一定会按需要显示，但是当我实现这样的东西时 - 我还添加了一个函数，根据数量重新条纹表应用过滤器后的行和奇数/偶数等 - 从而重新划分表格显示。
<!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>【讨论】：
您使用 filtertext 作为 clearFilter() 的类 如果单元格为空我想选择怎么办？ 你为什么使用正则表达式？好奇怪【参考方案2】：您可能还喜欢这个 jQuery 解决方案：https://www.jqueryscript.net/table/Simple-jQuery-Dropdown-Table-Filter-Plugin-ddtf-js.html
jQuery('#mytableid').ddTableFilter();
这是一个旧脚本，但仍然适用于 jquery 版本 3.6.0
【讨论】：
以上是关于如何使用 jQuery 为表格制作下拉列表过滤器？的主要内容，如果未能解决你的问题，请参考以下文章
使用 ASPX、AJAX 控件或 JQuery 的下拉列表过滤器？