如何過濾具有多個條件的表行。即，在復選框選擇上顯示相關行。 每個復選框代表列和行值

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/