如何使用 jQuery 为表格制作下拉列表过滤器？答案

【问题标题】：How to make dropdown list filter for a table using jQuery?如何使用 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>

【问题讨论】：

标签： jquery html filter html-table

【解决方案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

【讨论】：