Javascript 如何筛选具有多个条件的表行。即在复选框上选择“显示受尊重的行”。每个复选框表示列和行值

我有一个包含一些动态数据的表，还有一些列，如姓名、位置、薪水。我在步骤2中面临的问题，即多重条件检查。这是一步一步的代码

步骤1-

自动生成筛选器，即根据表行值动态添加复选框

 autoFilterItem("filterDiv"); 

上面的函数生成动态复选框，逻辑是它在表上循环，逐行读取值，返回唯一值数组并分别生成复选框，目前我正在为2个具有类loc、sal的列进行操作

第2步-

复选框更改事件，取决于状态（选中/取消选中），表行将隐藏/显示

我面临的问题是，如果用户选中了

100（类为sal）

，并且未选中

Kerala（类为loc）

，则应该隐藏具有Kerala的行

用于隐藏和显示am添加/删除类

.hideRow

///STEP TWO 
// On any checkbox clicked returns   desired out
$("body").on('change', '.chk', function () {
    var arrObj = [],
        arrCheckedValueCLass = [];
    var objCheckedData = {};
    $("#filterDiv .chk").each(function (index, val) {
        var sf = $(this);
        if (sf.is(":checked")) {
            var sf = $(this);
            arrObj.push({
                dataValue: $(sf).attr('data-value'),
                dataClass: $(sf).attr('data-class')
            });
        }
    });

    var self = $(this);
    var getClassName = self.attr("data-class");
    var matchTextValue = $.trim(self.attr("data-value"));
    if (self.is(":checked")) {
        if (matchTextValue == "All") {
            $(".chk").prop('checked', true);
        }
        $("." + getClassName).each(function () {
            var innerSelf = $(this);
            var gVal = $.trim(innerSelf.html());
            if (matchTextValue == "All") {
                innerSelf.closest("tr").removeClass("hideRow");
            } else {
                if (matchTextValue === gVal) {
                    console.log("checked and matchTextValue");
                    var i = 0,
                        lg = arrObj.length;
                    var flagSet = false;
                    for (i; i < lg; ++i) {
                        var objValue = arrObj[i].dataValue;
                        var objClass = arrObj[i].dataClass;
                        if (getClassName != objClass) {
                            var prevDataCheck = $.trim(innerSelf.closest("tr").find("." + objClass).html());
                            if (prevDataCheck == objValue) {
                                flagSet = true;
                                return true;
                            }
                        }
                    }
                    if (!flagSet) {
                        innerSelf.closest("tr").removeClass("hideRow");
                        innerSelf.closest("tr").addClass(getClassName + "_X");
                    }
                }
            }
        });
    } else {

        if (matchTextValue == "All") {
            $(".chk").prop('checked', false);
        }

        $("." + getClassName).each(function () {
            var innerSelf = $(this);
            var gVal = $.trim(innerSelf.html());
            if (matchTextValue === gVal) {
                innerSelf.closest("tr").addClass("hideRow");
                innerSelf.closest("tr").removeClass(getClassName + "_X");
            }
        });
    }
});

///第二步
//在任何选中的复选框上，返回所需的输出
$（“body”）.on（'change'，'.chk'，function（）{
var arrObj=[]，
arrCheckedValueCLass=[]；
var objCheckedData={}；
$（“#filterDiv.chk”）。每个（函数（索引，val）{
var sf=$（本）；
如果（sf.is（“：checked”））{
var sf=$（本）；
阿罗布推({
数据值：$（sf）.attr（'data-value'），
数据类：$（sf.attr（'data-class'））
});
}
});
var self=$（这是）；
var getClassName=self.attr（“数据类”）；
var matchTextValue=$.trim（self.attr（“数据值”）；
如果（self.is（“：checked”））{
如果（matchTextValue==“全部”）{
$（“.chk”）.prop（'checked'，true）；
}
$（“+getClassName）.each（函数（）{
var innerSelf=$（此值）；
var gVal=$.trim（innerSelf.html（））；
如果（matchTextValue==“全部”）{
innerSelf.closest（“tr”）.removeClass（“hideRow”）；
}否则{
如果（matchTextValue==gVal）{
console.log（“选中并匹配TextValue”）；
var i=0，
lg=arrObj.长度；
var-flagSet=false；
对于（i；i

---

点击


名称
位置
薪水
活跃的
詹姆斯
孟买
500
对
约瑟夫
喀拉拉邦
100
不
杰克
德里
500
对
安德莉亚
孟买
1000
不
大卫
德里
100
不
大卫
德里
99900
不

我已经根据您注意到的内容创建了小提琴，并且能够产生结果（即，如果用户选中100（类为sal），并且未选中喀拉拉邦（类为loc），则应该隐藏具有喀拉拉邦的行。）

我不知道这个解决方案有多高效。可能有更有效的方法来实现这一点，但无论如何，下面是js代码

$(document).ready(function () {


        //STEP ONE STARTS
        // This function generate checkbox from table data, which will be used for filteration   
        autoFilterItem("filterDiv");

        function autoFilterItem(idOfHolderDiv) {
            $("#" + idOfHolderDiv).empty();
            var arr1 = [];
            $(".sal").each(function () {
                arr1.push($.trim($(this).html()));
            });
            var arrNew = unique(arr1).sort(function (a, b) {
                return a - b
            });
            $.each(arrNew, function (i, val) {
                $("<input/>", {
                    "type": "checkbox",
                    "class": "chk",
                    "data-class": "sal",
                    "data-value": val,
                    "id": "chk" + val,
                    "checked": "checked"
                }).appendTo("#" + idOfHolderDiv).wrap("<div></div>").after(val);
            });

            $("#" + idOfHolderDiv).append("<hr>");
            var arr2 = [];
            $(".loc").each(function () {
                arr2.push($.trim($(this).html()));
            });
            var arr2New = unique(arr2).sort();

            $.each(arr2New, function (i, val) {
                $("<input/>", {
                    "type": "checkbox",
                    "class": "chk",
                    "data-class": "loc",
                    "data-value": val,
                    "id": "chk" + val,
                    "checked": "checked"
                }).appendTo("#" + idOfHolderDiv).wrap("<div></div>").after(val);
            });
            $("#" + idOfHolderDiv).append("<hr>");
            function unique(array) {
                return $.grep(array, function (el, index) {
                    return index == $.inArray(el, array);
                });
            }
        }
        // STEP ONE ENDS



        ///STEP TWO 
        // On any checkbox clicked returns   desired out

        var selectedSalaryArr = [];
        var selectedLocationArr = [];

        $("body").on('change', '.chk', function () {
            var selectedVal = $(this).attr('data-value');
            $('#filterDiv div').each(function () {
                var checkedval = $(this).find('input.chk').attr('data-value');
                var isChecked = $(this).find('input.chk').is(':checked');
                var dataClass = $(this).find('input.chk').attr('data-class');
                if (selectedVal === checkedval) {
                    if (dataClass === 'sal') {
                        var isExists = $.inArray(checkedval, selectedSalaryArr);
                        if (isExists === -1) {
                            selectedSalaryArr.push(checkedval);
                        } else {
                            selectedSalaryArr.splice($.inArray(checkedval, selectedSalaryArr), 1);
                        }
                    } else {
                        var isExists = $.inArray(checkedval, selectedLocationArr);
                        if (isExists === -1) {
                            selectedLocationArr.push(checkedval);
                        } else {
                            selectedLocationArr.splice($.inArray(checkedval, selectedLocationArr), 1);
                        }
                    }
                }
            });

            $('#myTable tbody tr').each(function () {
                var currentSalary = $(this).find('.sal').text();
                var currentLocation = $(this).find('.loc').text();

                var matchedSalaryValueExists = $.inArray(currentSalary, selectedSalaryArr);
                var matchedLocationValueExists = $.inArray(currentLocation, selectedLocationArr);

                if (selectedSalaryArr.length > 0 && selectedLocationArr.length > 0) {
                    if (matchedSalaryValueExists !== -1 && matchedLocationValueExists !== -1) {
                        if (!($(this).hasClass('hiderow'))) {
                            $(this).addClass('hiderow');
                        }
                    } else {
                        if ($(this).hasClass('hiderow')) {
                            $(this).removeClass('hiderow');
                            $(this).show();
                        }
                    }
                }
                else {
                    if (matchedSalaryValueExists !== -1 || matchedLocationValueExists !== -1) {
                        if (!($(this).hasClass('hiderow'))) {
                            $(this).addClass('hiderow');
                        }
                    } else {
                        if ($(this).hasClass('hiderow')) {
                            $(this).removeClass('hiderow');
                            $(this).show();
                        }
                    }
                }
            });
            $('#myTable tbody tr.hiderow').hide();
        });
    });

$（文档）.ready（函数（）{
//第一步开始
//此函数用于从表数据生成复选框，用于过滤
autoFilterItem（“filterDiv”）；
函数自动过滤器项（idOfHolderDiv）{
$（“#”+idOfHolderDiv）.empty（）；
var arr1=[]；
$（“.sal”）。每个（函数（）{
arr1.push（$.trim（$（this.html（））；
});
var arrNew=unique（arr1）.sort（函数（a，b）{
返回a-b
});
$。每个（新的，函数（i，val）{
$("", {
“类型”：“复选框”，
“类”：“chk”，
“数据类”：“sal”，
“数据值”：val，
“id”：“chk”+val，
“已检查”：“已检查”
}).appendTo（“#”+idOfHolderDiv）。在（val）之后加上（“”）；
});
$（“#”+idOfHolderDiv）。追加（“
”）；
var arr2=[]；
$（“.loc”）。每个（函数）{
arr2.push（$.trim（$（this.html（））；
});
var arr2New=unique（arr2.sort（）；
$.each（arr2New，函数（i，val）
$(document).ready(function () {


        //STEP ONE STARTS
        // This function generate checkbox from table data, which will be used for filteration   
        autoFilterItem("filterDiv");

        function autoFilterItem(idOfHolderDiv) {
            $("#" + idOfHolderDiv).empty();
            var arr1 = [];
            $(".sal").each(function () {
                arr1.push($.trim($(this).html()));
            });
            var arrNew = unique(arr1).sort(function (a, b) {
                return a - b
            });
            $.each(arrNew, function (i, val) {
                $("<input/>", {
                    "type": "checkbox",
                    "class": "chk",
                    "data-class": "sal",
                    "data-value": val,
                    "id": "chk" + val,
                    "checked": "checked"
                }).appendTo("#" + idOfHolderDiv).wrap("<div></div>").after(val);
            });

            $("#" + idOfHolderDiv).append("<hr>");
            var arr2 = [];
            $(".loc").each(function () {
                arr2.push($.trim($(this).html()));
            });
            var arr2New = unique(arr2).sort();

            $.each(arr2New, function (i, val) {
                $("<input/>", {
                    "type": "checkbox",
                    "class": "chk",
                    "data-class": "loc",
                    "data-value": val,
                    "id": "chk" + val,
                    "checked": "checked"
                }).appendTo("#" + idOfHolderDiv).wrap("<div></div>").after(val);
            });
            $("#" + idOfHolderDiv).append("<hr>");
            function unique(array) {
                return $.grep(array, function (el, index) {
                    return index == $.inArray(el, array);
                });
            }
        }
        // STEP ONE ENDS



        ///STEP TWO 
        // On any checkbox clicked returns   desired out

        var selectedSalaryArr = [];
        var selectedLocationArr = [];

        $("body").on('change', '.chk', function () {
            var selectedVal = $(this).attr('data-value');
            $('#filterDiv div').each(function () {
                var checkedval = $(this).find('input.chk').attr('data-value');
                var isChecked = $(this).find('input.chk').is(':checked');
                var dataClass = $(this).find('input.chk').attr('data-class');
                if (selectedVal === checkedval) {
                    if (dataClass === 'sal') {
                        var isExists = $.inArray(checkedval, selectedSalaryArr);
                        if (isExists === -1) {
                            selectedSalaryArr.push(checkedval);
                        } else {
                            selectedSalaryArr.splice($.inArray(checkedval, selectedSalaryArr), 1);
                        }
                    } else {
                        var isExists = $.inArray(checkedval, selectedLocationArr);
                        if (isExists === -1) {
                            selectedLocationArr.push(checkedval);
                        } else {
                            selectedLocationArr.splice($.inArray(checkedval, selectedLocationArr), 1);
                        }
                    }
                }
            });

            $('#myTable tbody tr').each(function () {
                var currentSalary = $(this).find('.sal').text();
                var currentLocation = $(this).find('.loc').text();

                var matchedSalaryValueExists = $.inArray(currentSalary, selectedSalaryArr);
                var matchedLocationValueExists = $.inArray(currentLocation, selectedLocationArr);

                if (selectedSalaryArr.length > 0 && selectedLocationArr.length > 0) {
                    if (matchedSalaryValueExists !== -1 && matchedLocationValueExists !== -1) {
                        if (!($(this).hasClass('hiderow'))) {
                            $(this).addClass('hiderow');
                        }
                    } else {
                        if ($(this).hasClass('hiderow')) {
                            $(this).removeClass('hiderow');
                            $(this).show();
                        }
                    }
                }
                else {
                    if (matchedSalaryValueExists !== -1 || matchedLocationValueExists !== -1) {
                        if (!($(this).hasClass('hiderow'))) {
                            $(this).addClass('hiderow');
                        }
                    } else {
                        if ($(this).hasClass('hiderow')) {
                            $(this).removeClass('hiderow');
                            $(this).show();
                        }
                    }
                }
            });
            $('#myTable tbody tr.hiderow').hide();
        });
    });