Connect_logo_6.png 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码

jQuery表格数据条件筛选代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-04-09
一款实用的jQuery表格数据条件筛选代码,点击筛选按钮弹出设置窗口,根据需要进行勾选来显示表格数据。


js代码

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