对页面中HTML的多表格筛选js

黑白码农

已于 2022-02-24 10:20:49 修改

阅读量1.5k

点赞数 1

分类专栏： js问题处理文章标签： javascript html jquery

于 2022-02-23 17:34:42 首次发布

本文链接：https://blog.csdn.net/shizg1994/article/details/123095351

版权

js问题处理专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以下是整个js内容
直接在HTML页面中引用就可生效

//判断现实状态，全1时要显示出来
var showType = "111111";//有几列，就有几个1

if (!String.prototype.trim) {
    String.prototype.trim = function () {
        return this.replace(/^\s+|\s+$/g, '');
    };
}
String.prototype.replaceAll = function (s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2);
}
var cols = 5;//结束列数
var start = 0;//开始列数
var tr = [];
var maxtablenum = 3;//表格的数量，
var starttablenum = 0;//表格开始数量为0
for (var tablenum = starttablenum; tablenum <= maxtablenum; tablenum++) {
    var table = jQuery_1_8_3("#sth_content").find("table").eq(tablenum);
    if (table.length > 0) {
        var header = table.find("tr").eq(0);
        tr[tablenum] = table.find("tr").not(header);
        for (var col = start; col <= cols; col++)  {
            if (tablenum > 0) {
                var colflag = Number(col + tablenum * (cols + 1));
            } else {
                var colflag = col;
            }
            eval("var init_status_" + colflag + "=1");
            var td = header.find("td").eq(col);
            td.attr("id", "td" + colflag);
            var wid = td.width() + 25 + 20;
            jQuery_1_8_3("body").append("<div style='border-style:solid;border-width:1px;display:none;border-color:#ccc;background-color:#FFFCF7;z-index:1000; position:absolute;width:" + wid + "px;overflow-y:auto;margin-top:40px;' id='gc" + colflag + "'></div>");
            var txt = td.text();
            td.html("<div style='text-align:center;'>" + txt + "▼</div>");
            td.click(function (e) {
                if (e.stopPropagation) {
                    e.stopPropagation();
                } else {
                    e.cancelBubble = true;
                }
            });
            //var n = new Array();
            eval("var n" + colflag + " = new Array()");
            jQuery_1_8_3.each(tr[tablenum], function (index, domEle) {
                var temp = domEle.getElementsByTagName("td")[col].innerText;
                var tmparray = eval("n" + colflag);
                //if(eval("n"+col+".indexOf(temp)") == -1)
                if (temp != '') {
                    if (eval("jQuery_1_8_3.inArray(temp,n" + colflag + ")") == -1) {
                        eval("n" + colflag + ".push(temp)");
                    }
                    jQuery_1_8_3(domEle).attr("showType", showType)
                }
            });
            var high = td.height();
            // 弹出选择列表框的点击事件不冒泡到body
            jQuery_1_8_3("#gc" + colflag).click(function (e) {
                if (e.stopPropagation) {
                    e.stopPropagation();
                }
            });
            td.mousedown(function (e) {
                var id = jQuery_1_8_3(this).attr('id').substring(2);
                if (document.getElementById('gc' + id).style.display == 'block' || document.getElementById('gc' + id).style.display == '') {
                    document.getElementById('gc' + id).style.display = 'none';
                    return;
                }
                document.getElementById('gc' + id).style.display = 'block';
                if (document.getElementById("u" + id + "99") == null) {
                    jQuery_1_8_3("#gc" + id).append("<div id='u" + id + "99' style='height:20px;width:auto;cursor:hand;text-align:left;'><input id='chkall' class='chkall_" + id + "' type='checkbox' onchange='showgc(this)'/><span> 全部</span></div>");
                }
                for (var v = 0; eval("v<=n" + id + ".length"); v++) {
                    if (document.getElementById("u" + id + v) == null && eval("n" + id + "[v]") != null) {
                        jQuery_1_8_3("#gc" + id).append("<div id='u" + id + v + "' style='height:20px;width:auto;cursor:hand;text-align:left;' ><input type='checkbox' onchange='showgc(this)' /><span> " + eval("n" + id + "[v]") + "</span></div>");
                    }
                    var gcdiv = document.getElementById("gc" + id);
                    gcdiv.style.left = getLeft(document.getElementById('td' + id)) + 5 + "px";
                    gcdiv.style.top = getTop(document.getElementById('td' + id)) + 25 + "px";
                }
                //jQuery_1_8_3("#gc"+id).parent().find("input[type='checkbox']").attr("checked",false);
                for (var j = 0; j <= cols * (tablenum + 1); j++) {
                    if (j != id) {
                        if (document.getElementById('gc' + j) != null) {
                            document.getElementById('gc' + j).style.display = 'none';
                        }
                    } else {
                        document.getElementById('gc' + j).style.display = '';
                    }
                }
            });
        }
    }
}
var end = cols * (tablenum + 1);
jQuery_1_8_3("body").click(function (e) {
    for (var j = 0; j <= end; j++) {
        if (document.getElementById('gc' + j) != null) {
            document.getElementById('gc' + j).style.display = 'none';
        }
    }
});
function maskOP(maskStrin, pos, bitValue) {
    var ipos = parseInt(pos);
    var tmp2 = maskStrin.substr(ipos + 1);
    var tmp1 = maskStrin.substr(0, ipos);
    return tmp1 + bitValue + tmp2;
}
function showgc(obj) {
    var jobj = jQuery_1_8_3(obj).parent();
    var oldid = jobj.parent().attr("id").substring(2);
    var id = jobj.parent().attr("id").substring(2);
    var tablenum2 = Math.floor(id / (cols + 1));
    if (tablenum2 <= 0) {
        tablenum2 = 0;
    } else {
        id -= tablenum2 * (cols + 1);
    }
    var selType = jobj.find("span").eq(0).text();
    var checkbox = jobj.find("input[type='checkbox']").eq(0);
    if (eval("init_status_" + oldid + "==1")) {
        jobj.parent().find("input[type='checkbox']").attr("checked", false);
        jQuery_1_8_3.each(tr[tablenum2], function (index, domEle) {
            var theShowType = maskOP(jQuery_1_8_3(domEle).attr("showType"), id, "0");
            jQuery_1_8_3(domEle).attr("showType", theShowType);
            domEle.style.display = "none";
        });
        checkbox.attr("checked", true);
        eval("init_status_" + oldid + "=0");
    }
    if (selType.trim() == "全部") {
        if (checkbox.attr("checked")) {
            //checkbox.attr("checked", false);
            jobj.parent().find("input[type='checkbox']").attr("checked", true);
            jQuery_1_8_3.each(tr[tablenum2], function (index, domEle) {
                var theShowType = maskOP(jQuery_1_8_3(domEle).attr("showType"), id, "1");
                jQuery_1_8_3(domEle).attr("showType", theShowType);
                if (theShowType == showType)
                    domEle.style.display = "";
            });
        } else {
            //checkbox.attr("checked", true);
            jobj.parent().find("input[type='checkbox']").attr("checked", false);
            jQuery_1_8_3.each(tr[tablenum2], function (index, domEle) {
                var theShowType = maskOP(jQuery_1_8_3(domEle).attr("showType"), id, "0");
                jQuery_1_8_3(domEle).attr("showType", theShowType);
                domEle.style.display = "none";
            });
        }
    } else {
        jobj.parent().find("input[type='checkbox']").eq(0).attr("checked", false);
        var allcheckbox = jobj.parent().find(".chkall[type='checkbox']").eq(0);
        if (!allcheckbox.attr('checked')) {
            allcheckbox.attr('checked', false);
        }
        jQuery_1_8_3.each(tr[tablenum2], function (index, domEle) {
            var temp = domEle.getElementsByTagName("td")[id].innerText;
            var theShowType = jQuery_1_8_3(domEle).attr("showType");
            if (temp.replace(/\s/g, '') == selType.replace(/\s/g, '')) {
                if (checkbox.attr("checked")) {
                    theShowType = maskOP(theShowType, id, "1");
                    if (theShowType == showType)
                        domEle.style.display = "";
                } else {
                    theShowType = maskOP(theShowType, id, "0");
                    domEle.style.display = "none";
                }
                jQuery_1_8_3(domEle).attr("showType", theShowType);
            }
        });
    }
    var gcdiv1 = document.getElementById("gc" + id);
    gcdiv1.style.left = getLeft(document.getElementById('td' + id)) + 5 + "px";
}
//获取元素的纵坐标 
function getTop(e) {
    var offset = e.offsetTop;
    if (e.offsetParent != null) offset += getTop(e.offsetParent);
    return offset;
}
//获取元素的横坐标 
function getLeft(e) {
    var offset = e.offsetLeft;
    if (e.offsetParent != null) offset += getLeft(e.offsetParent);
    return offset;
}