<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery表格数据条件筛选代码</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
.tablediv{width: 1000px;margin: auto;}
.modal-body{text-align: center; padding: 0;}
.chooses{width:100%;height:60px;border-bottom: 1px solid #E5E5E5;}
.chooses:last-child{border: none;}
.chooses:nth-child(even){background: #f9f9f9;}
.choosediv{float:left;width: 180px;height: 60px;padding-top: 10px;}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">筛选一下</button>
</div>
<div class="tablediv">
<table class="table table-hover choosetable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
<th>学历</th>
<th>性格</th>
<th>爱好</th>
<th>月薪</th>
<th>婚姻状况</th>
<th>颜值</th>
<th>可爱度</th>
</tr>
</thead>
<tbody>
<tr>
<td>陆卫民</td>
<td>24</td>
<td>178cm</td>
<td>本科</td>
<td>温和</td>
<td>口琴</td>
<td>5w</td>
<td>未婚</td>
<td>70</td>
<td>100</td>
</tr>
<tr>
<td>陆卫民</td>
<td>24</td>
<td>178cm</td>
<td>本科</td>
<td>温和</td>
<td>口琴</td>
<td>5w</td>
<td>未婚</td>
<td>70</td>
<td>100</td>
</tr>
<tr>
<td>陆卫民</td>
<td>24</td>
<td>178cm</td>
<td>本科</td>
<td>温和</td>
<td>口琴</td>
<td>5w</td>
<td>未婚</td>
<td>70</td>
<td>100</td>
</tr>
<tr>
<td>陆卫民</td>
<td>24</td>
<td>178cm</td>
<td>本科</td>
<td>温和</td>
<td>口琴</td>
<td>5w</td>
<td>未婚</td>
<td>70</td>
<td>100</td>
</tr>
<tr>
<td>陆卫民</td>
<td>24</td>
<td>178cm</td>
<td>本科</td>
<td>温和</td>
<td>口琴</td>
<td>5w</td>
<td>未婚</td>
<td>70</td>
<td>100</td>
</tr>
<tr>
<td>陆卫民</td>
<td>24</td>
<td>178cm</td>
<td>本科</td>
<td>温和</td>
<td>口琴</td>
<td>5w</td>
<td>未婚</td>
<td>70</td>
<td>100</td>
</tr>
<tr>
<td>陆卫民</td>
<td>24</td>
<td>178cm</td>
<td>本科</td>
<td>温和</td>
<td>口琴</td>
<td>5w</td>
<td>未婚</td>
<td>70</td>
<td>100</td>
</tr>
<tr>
<td>陆卫民</td>
<td>24</td>
<td>178cm</td>
<td>本科</td>
<td>温和</td>
<td>口琴</td>
<td>5w</td>
<td>未婚</td>
<td>70</td>
<td>100</td>
</tr>
<tr>
<td>陆卫民</td>
<td>24</td>
<td>178cm</td>
<td>本科</td>
<td>温和</td>
<td>口琴</td>
<td>5w</td>
<td>未婚</td>
<td>70</td>
<td>100</td>
</tr>
<tr>
<td>陆卫民</td>
<td>24</td>
<td>178cm</td>
<td>本科</td>
<td>温和</td>
<td>口琴</td>
<td>5w</td>
<td>未婚</td>
<td>70</td>
<td>100</td>
</tr>
<tr>
<td>陆卫民</td>
<td>24</td>
<td>178cm</td>
<td>本科</td>
<td>温和</td>
<td>口琴</td>
<td>5w</td>
<td>未婚</td>
<td>70</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">筛选条件 <input id="allchecked" type="checkbox" checked="checked"></h4>
</div>
<div class="modal-body">
<!-- <div class="chooses">
<div class="choosediv">
<label class="checkbox">
<input type="checkbox" value="0"> 姓名
</label>
</div>
<div class="choosediv">
<label class="checkbox">
<input type="checkbox" value="1"> 年龄
</label>
</div>
<div class="choosediv">
<label class="checkbox">
<input type="checkbox" value="2"> 身高
</label>
</div>
</div>
-->
</div>
<div style="clear: both;"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="choosebtn" type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
$(function(){
//要绑定的表格类名
var choosetable=".choosetable";
var checkarray=[];
//循环遍历table的th加入到筛选列表中
$(choosetable+" th").each(function(){
checkarray.push($(this).text());
});
for (var i = 0; i < checkarray.length/3; i++) {
if(i<checkarray.length/3-1||checkarray.length%3==0){
var checktext="";
for (var j = 0; j < 3; j++) {
checktext+="<div class='choosediv'><label class='checkbox'><input type='checkbox' checked value='"+((i*3)+j)+"'> "+checkarray[((i*3)+j)]+" </label> </div>";
}
}else{
var checktext="";
for (var j = 0; j <checkarray.length%3; j++) {
checktext+="<div class='choosediv'><label class='checkbox'><input type='checkbox' checked value='"+((i*3)+j)+"'> "+checkarray[((i*3)+j)]+" </label> </div>";
}
}
$(".modal-body").append("<div class='chooses'>"+checktext+"</div>");
}
$("#choosebtn").click(function(){
var choosearr=[];
$(".checkbox input").each(function(){
//alert($(this).is(":checked"));
if(!$(this).is(":checked")){
choosearr.push($(this).val());
}
})
//alert(choosearr);
$(choosetable+" tr").each(function(){
$(this).children().show();
});
for(var i=0;i<choosearr.length;i++){
$(choosetable+" tr").each(function(){
$(this).children().eq(choosearr[i]).hide();
});
}
});
//全选/全不选
$("#allchecked").click(function(){
if(this.checked){
$(".checkbox input").prop("checked", true);
}else{
$(".checkbox input").prop("checked", false);
}
});
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
