有时候我们除了给后台字段调取需要的数据外也会用到前台的筛选功能，这样的好处是一旦加载完成就不需要用户操作时在去加载了，快速方便的筛选出用户需要的数据，具体方法参看如下:
核心代码（思路）：
$("#state").change(function () { var str = $(this).val(); $("#page tr").each(function () { if ($(this).find("td:eq(2)").text() == str) { $(this).css("display", ""); console.log($(this).parent()); } else { $(this).css("display", "none"); } }); });
通过改变select框的内容时获取其val，然后通过遍历表格中需要对比的列的内容，为其tr添加display来控制隐藏和显示。
完整例子：（需自己引入angularjs）
html：与之前的表格内容基本一致
<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link href="http://libs.baidu.com/bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet">
<script src="js/angularjs/angular.min.js"></script>//引入自己的angularjs文件
<style>
.text{
margin:0 auto;
border:1px solid #ccc;
100%;
max-200px;
}
</style>
<title>欢迎</title>
</head>
<body ng-controller="myCtrl">
<select name="state" id="state" style="margin:30px">
<option style="border-bottom: 10px solid red" value="中东赛区比赛">中东赛区比赛</option>
<option value="中亚赛区比赛">中亚赛区比赛</option>
<option value="欧美赛区比赛">欧美赛区比赛</option>
<option value="韩国赛区比赛">韩国赛区比赛</option>
</select> <div class="row-fluid"> <div class="span6"></div> <table class="table table-striped table-bordered table-hover" id="example" style="margin-top:10px;"> <thead> <tr> <th style=" 20px;" rowspan="2">全选 <br><input type="checkbox" ng-model="selectAll"></th> <th style="text-align: center; 50px;vertical-align: middle" rowspan="2">序号</th> <th style="text-align: center; 150px;vertical-align: middle" rowspan="2">名称</th> <th style="text-align: center; 150px;vertical-align: middle" rowspan="2">日期</th> <th style="text-align: center; 150px;" colspan="3">比赛队伍（红）</th> <th style="text-align: center; 150px;" colspan="3">比赛队伍（蓝）</th> <th style="text-align: center; 150px;vertical-align: middle" rowspan="2">比分</th> <th style="text-align: center; 150px;vertical-align: middle" rowspan="2">说明</th> <th style="text-align: center; 150px;vertical-align: middle" rowspan="2">玩家支持队伍</th> </tr> <tr> <th style="text-align: center; 80px;">第一场</th> <th style="text-align: center; 80px;">第二场</th> <th style="text-align: center; 80px;">说明</th> <th style="text-align: center; 80px;">第一场</th> <th style="text-align: center; 80px;">第二场</th> <th style="text-align: center; 80px;">说明</th> </tr> </thead> <tbody ng-click="fun()" id="page"> <!--track by tb.id--> <tr ng-repeat="tb in saveDate"> <td style=" 20px;"><input type="checkbox" ng-checked="selectAll"></td> <td style="text-align:center;">{{tb.id}}</td> <td style="text-align:center;">{{tb.zbname}}</td> <td style="text-align:center;">{{tb.zbtime}}</td> <td style="text-align:center;">{{tb.zbrul1}}</td> <td style="text-align:center;">{{tb.zbrul2}}</td> <td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td> <td style="text-align:center;">{{tb.zbrul2}}</td> <td style="text-align:center;">{{tb.zbrul1}}</td> <td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td><!-- 2016.1.19通过可编译的div来代替输入框 --> <td style="text-align:center;">{{tb.score}}</td> <td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td> <td> <select name="" id="" ng-change="changetype(adds)" ng-model="adds" style="text-align:center;100%;min-80px;margin-bottom:0"> <option value="" ng-show="isShow">{{tb.type}}</option> <option value="支持红方">支持红方</option> <option value="支持蓝方">支持蓝方</option> <option value="双方相同">双方相同</option> </select> </td> </tr> </tbody> </table> </div> </body>
js：
<script> angular.module("myModule",[]).controller('myCtrl', function($scope) { // $http.post请求表格数据 // 模仿请求得到的数据 $scope.saveDate = [{id: 1, zbname: "中亚赛区比赛", zbtime: "2015-12-03", zbrul1: "胜利", zbrul2: "失败", por: "请输入说明内容", score: "2:1", type: "支持红方"}, { id: 2, zbname: "日韩赛区比赛", zbtime: "2015-11-11", zbrul1: "胜利", zbrul2: "胜利", por: "请输入说明内容", score: "2:1", type: "支持蓝方"}, { id: 3, zbname: "欧美赛区比赛", zbtime: "2015-3-03", zbrul1: "失败", zbrul2: "胜利", por: "请输入说明内容", score: "2:1", type: "双方相同"}, { id: 4, zbname: "中东赛区比赛", zbtime: "2016-1-05", zbrul1: "胜利", zbrul2: "失败", por: "请输入说明内容", score: "2:1", type: "支持蓝方"}, { id: 5, zbname: "北京赛区比赛", zbtime: "2014-12-23", zbrul1: "失败", zbrul2: "胜利", por: "请输入说明内容", score: "2:1", type: "双方相同"}, { id: 6, zbname: "韩国赛区比赛", zbtime: "2015-11-01", zbrul1: "失败", zbrul2: "胜利", por: "请输入说明内容", score: "2:1", type: "双方相同"}, { id: 7, zbname: "日本赛区比赛", zbtime: "2011-1-23", zbrul1: "胜利", zbrul2: "失败", por: "请输入说明内容", score: "2:1", type: "支持红方"}, { id: 8, zbname: "中亚赛区比赛", zbtime: "2013-12-15", zbrul1: "失败", zbrul2: "胜利", por: "请输入说明内容", score: "2:1", type: "支持蓝方"}, { id: 9, zbname: "韩国赛区比赛", zbtime: "2015-10-17", zbrul1: "失败", zbrul2: "胜利", por: "请输入说明内容", score: "2:1", type: "支持红方"}, {id: 10, zbname: "中亚赛区比赛", zbtime: "2015-11-21", zbrul1: "胜利", zbrul2: "胜利", por: "请输入说明内容", score: "2:1", type: "支持蓝方"}, { id: 11, zbname: "中东赛区比赛", zbtime: "2015-2-02", zbrul1: "失败", zbrul2: "失败", por: "请输入说明内容", score: "2:1", type: "支持红方"}, { id: 12, zbname: "中亚赛区比赛", zbtime: "2015-2-05", zbrul1: "胜利", zbrul2: "失败", por: "请输入说明内容", score: "2:1", type: "双方相同"}]; $("#state").change(function () { var str = $(this).val(); $("#page tr").each(function () { if ($(this).find("td:eq(2)").text() == str) { $(this).css("display", ""); console.log($(this).parent()); } else { $(this).css("display", "none"); } }); }); }) </script>
</html>
<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link href="http://libs.baidu.com/bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet">
<script src="js/angularjs/angular.min.js"></script>
<style>
.text{
margin:0 auto;
border:1px solid #ccc;
width:100%;
max-width:200px;
}
</style>
<title>欢迎</title>
</head>
<body ng-controller="myCtrl">
<select name="state" id="state" style="margin:30px">
<option style="border-bottom: 10px solid red" value="中东赛区比赛">中东赛区比赛</option>
<option value="中亚赛区比赛">中亚赛区比赛</option>
<option value="欧美赛区比赛">欧美赛区比赛</option>
<option value="韩国赛区比赛">韩国赛区比赛</option>
</select>