Question

我想在特殊列中制作下拉列表过滤器，例如我想为＆＃34; Married＆＃34;专栏＆amp;从下拉列表中选择是或否，这是我的表格：

this is want I want

我需要一个jquery代码来帮助我制作过滤器。

＆＃13;

<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>

＆＃13;

Answer 1

试试这个 - 使用正则表达式和jQuery过滤器函数根据onchange上的选择列表过滤结果（使用添加的类来控制显示）。这也可以在文本输入版本中使用，以过滤任何内容的任何表行，以便您可以键入人名等，并使过滤器功能只显示匹配的名称。

我还放了一个'all'选项来再次显示所有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>

如何使用jQuery为表格下拉列表过滤器？

1 个答案: