
一款实用的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>










暂无评论内容