如何过滤具有多个条件的表行。即，在复选框选择上显示相关行。 每个复选框代表列和行值

Question

我有一个表，其中包含一些动态数据，以及“名称”，“位置”，“薪水”等列。 我在第2步即多条件检查中面临的问题。 这是逐步的代码。

JS小提琴演示

第1步-

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

 autoFilterItem("filterDiv"); 

上面的函数生成动态复选框，逻辑是遍历表，逐行读取值并返回唯一值数组并生成复选框，目前正在对具有loc，sal类的2个列进行操作。

第2步-

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

我面临的问题是，如果用户选中100 ( class as sal) ，而未选中Kerala ( class as loc) ，则应隐藏具有喀拉拉邦的行。

对于隐藏和显示，我要添加/删除类.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");
            }
        });
    }
});

---

<div id="filterDiv"></div>
<button>Click</button>
<br>
<div id="tableContainer">
    <table id="myTable">
        <thead>
            <tr>
                <th data-name='name'>Name</th>
                <th data-loc='Location'>Location</th>
                <th data-sal='salary'>Salary</th>
                <th data-sts='Active'>Active</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="name">James</td>
                <td class="loc">Mumbai</td>
                <td class="sal">500</td>
                <td class="sts">Yes</td>
            </tr>
            <tr>
                <td class="name">Joseph</td>
                <td class="loc">Kerala</td>
                <td class="sal">100</td>
                <td class="sts">No</td>
            </tr>
            <tr>
                <td class="name">Jack</td>
                <td class="loc">Delhi</td>
                <td class="sal">500</td>
                <td class="sts">Yes</td>
            </tr>
            <tr>
                <td class="name">Andrea</td>
                <td class="loc">Mumbai</td>
                <td class="sal">1000</td>
                <td class="sts">No</td>
            </tr>
            <tr>
                <td class="name">David</td>
                <td class="loc">Delhi</td>
                <td class="sal">100</td>
                <td class="sts">No</td>
            </tr>
            <tr>
                <td class="name">David</td>
                <td class="loc">Delhi</td>
                <td class="sal">99900</td>
                <td class="sts">No</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

我已经根据您记下的内容创建了小提琴，并且能够产生结果（也就是说，如果用户选中100（类为sal），而未选中Kerala（类为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();
        });
    });

以下是jsfiddle链接：

https://jsfiddle.net/shrawanlakhe/v8gyde77/