利用jQuery实现设置表格条件筛选代码



9 35 12



特效描述:利用jQuery实现 设置表格 条件筛选代码,利用jQuery实现设置表格条件筛选代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

3. HTML代码

<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">&times;</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';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 提示框/弹出层 筛选 筛选器 按钮控制 table表格 表格插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到