从选项中过滤列中的数据使用 jQuery

Question

我使用过滤，我有问题，我有 4 个选项输入，其中我有一些需要在表中过滤的数据，现在我只过滤一列的数据，但问题是我是否要再添加一个过滤器，脚本将不起作用，并从最后选择的值中过滤数据。 但我需要如果我在选项数据中有 2-4 个选定值正在过滤。

我的代码：JS：

$("#cancelFilters").hide();

$('#filterButton').click(function () {
    getSelectedVal()
    filterData()
    filters = [];
    $("#cancelFilters").fadeIn();
});

var filters = [];

function getSelectedVal() {
    var materialCode = $('#materialCode option:selected').text()
    var plantCode = $('#plantCode option:selected').text()
    var vsCode = $('#vsCode option:selected').text()
    var status = $('#statusCode option:selected').text()

    applyFilter(materialCode, 1)
    applyFilter(plantCode, 2)
    applyFilter(vsCode, 3)
    applyFilter(status, 4)
}

function applyFilter(value, id) {
    if (value)
        filters.push('.column' + id + ':contains(' + value + ')');
}


function filterData() {
    if (filters.length > 0) {
        var rows = $("#orderListData").find("tr").hide();

        filters.forEach(filter => {
            $("#orderListData td" + filter).parent().show();
        })

    }
}

$('#cancelFilters').click(function () {
    var $rows = $('#orderListData tr');
    $rows.show()
    $("#cancelFilters").fadeOut();
});

JSFIddle - https://jsfiddle.net/qunzorez/k3ygL07f/11/

因此，如果在选项号 3 中您将选择023并点击添加过滤器，它将起作用，但如果我选择023和选项号 4 已预订，它将仅过滤已预订状态，问题出在哪里？

Answer 1

通过对每个过滤器执行$("#orderListData td" + filter).parent().show() ，您实际上是在显示与甚至一个过滤器匹配的每一行。 虽然您必须只显示那些可以满足所有过滤器的行。

因此，不要遍历filters并检查是否有任何td元素满足它，而是遍历rows并检查它是否满足每个过滤器。

使用此代码执行此操作（仅更改了filterData function）

 $("#cancelFilters").hide(); $('#filterButton').click(function () { getSelectedVal() filterData() filters = []; $("#cancelFilters").fadeIn(); }); var filters = []; function getSelectedVal() { var materialCode = $('#materialCode option:selected').text() var plantCode = $('#plantCode option:selected').text() var vsCode = $('#vsCode option:selected').text() var status = $('#statusCode option:selected').text() applyFilter(materialCode, 1) applyFilter(plantCode, 2) applyFilter(vsCode, 3) applyFilter(status, 4) } function applyFilter(value, id) { if (value) filters.push('.column' + id + ':contains(' + value + ')'); } function filterData() { if (filters.length > 0) { var rows = $("#orderListData").find("tr"); rows.hide(); //Check if any row satisfy all filters $.each(rows, (i, row) => { if (filters.every(filter => $(row).find(filter).length)) { $(row).show(); } }) } } $('#cancelFilters').click(function () { var $rows = $('#orderListData tr'); $rows.show() $("#cancelFilters").fadeOut(); });

 .row { width: 100%; display: flex; flex-wrap: wrap; }.row::after { display: table; clear: both; content: ""; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-3"> <input class="form-control" type="text" id="search" placeholder="Search for...""></div> <div class=" col-2"> <select class="form-control secondary-select" id="materialCode"> <option></option> <option>16014344C</option> <option>16016398A</option> <option>16009838A</option> </select> <p><strong>Material Code</strong></p> </div> <div class="col-2"> <select class="form-control secondary-select" id="plantCode"> <option></option> <option>0119</option> <option>0379</option> </select> <p><strong>Plant Code</strong></p> </div> <div class="col-2"> <select class="form-control secondary-select" id="vsCode"> <option></option> <option>023</option> <option>0379</option> </select> <p><strong>Value Stream Code</strong></p> </div> <div class="col-2"> <select class="form-control secondary-select" id="statusCode"> <option></option> <option>BOOKED</option> <option>RELEASED</option> </select> <p><strong>Status</strong></p> </div> <div class="col-1"> <button id="filterButton" class="button button-clear butt-heith"> Apply filters </button> </div> </div> <button id="cancelFilters" class="button button-deactivate float-right"> Cancel filters </button> <table class="table-editor" id="ordersList"> <thead> <tr> <th>Production order code</th> <th>Material code</th> <th>Target quantity</th> <th>Plant code</th> <th>Value stream code</th> <th>Status</th> <th>Release date</th> <th>Activation date</th> <th>Booking date</th> <th>TPT (d)</th> </tr> </thead> <tbody id="orderListData"> <tr> <td> <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20943">14298947</a> </td> <td class="column1"> 11027174A </td> <td> 1 </td> <td class="column2"> </td> <td class="column3"> 023 </td> <td class="column4"> BOOKED </td> <td> 2020-03-02 06:57:42 </td> <td></td> <td> 2020-03-02 08:12:22 </td> <td> 0.1 </td> </tr> <tr> <td> <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20944">80150671</a> </td> <td class="column1"> 11019682A </td> <td> 800 </td> <td class="column2"> </td> <td class="column3"> 023 </td> <td class="column4"> BOOKED </td> <td> 2020-03-02 08:02:32 </td> <td></td> <td> 2020-03-02 15:30:51 </td> <td> 0.3 </td> </tr> <tr> <td> <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20945">80150672</a> </td> <td class="column1"> 15000987A </td> <td> 503 </td> <td class="column2"> </td> <td class="column3"> </td> <td class="column4"> BOOKED </td> <td> 2020-03-02 08:28:04 </td> <td></td> <td> 2020-03-13 00:00:00 </td> <td> 10.6 </td> </tr> <tr> <td> <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20946">80150673</a> </td> <td class="column1"> 11011572E </td> <td> 153 </td> <td class="column2"> </td> <td class="column3"> 023 </td> <td class="column4"> BOOKED </td> <td> 2020-03-02 08:30:32 </td> <td></td> <td> 2020-03-06 00:00:00 </td> <td> 3.6 </td> </tr> <tr> <td> <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20947">80150674</a> </td> <td class="column1"> 18300753C </td> <td> 153 </td> <td class="column2"> </td> <td class="column3"> </td> <td class="column4"> BOOKED </td> <td> 2020-03-02 08:30:57 </td> <td></td> <td> 2020-03-10 00:00:00 </td> <td> 7.6 </td> </tr> <tr> <td> <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20948">80150675</a> </td> <td class="column1"> 11014966C </td> <td> 153 </td> <td class="column2"> </td> <td class="column3"> 023 </td> <td class="column4"> RELEASED </td> <td> 2020-03-02 08:31:26 </td> <td></td> <td></td> <td> </td> </tr> <tr> <td> <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20949">80150676</a> </td> <td class="column1"> 11014264D </td> <td> 79 </td> <td class="column2"> </td> <td class="column3"> </td> <td class="column4"> BOOKED </td> <td> 2020-03-02 08:33:48 </td> <td></td> <td> 2020-03-06 00:00:00 </td> <td> 3.6 </td> </tr> <tr> <td> <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20950">80150677</a> </td> <td class="column1"> 18300753C </td> <td> 79 </td> <td class="column2"> </td> <td class="column3"> 023 </td> <td class="column4"> BOOKED </td> <td> 2020-03-02 08:34:16 </td> <td></td> <td> 2020-03-10 00:00:00 </td> <td> 7.6 </td> </tr> <tr> <td> <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20951">80150678</a> </td> <td class="column1"> 11020109B </td> <td> 79 </td> <td class="column2"> </td> <td class="column3"> </td> <td class="column4"> RELEASED </td> <td> 2020-03-02 08:34:38 </td> <td></td> <td></td> <td> </td> </tr> <tr> <td> <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20952">80150679</a> </td> <td class="column1"> 15001454B </td> <td> 100 </td> <td class="column2"> </td> <td class="column3"> 023 </td> <td class="column4"> BOOKED </td> <td> 2020-03-02 08:37:59 </td> <td></td> <td> 2020-03-12 00:00:00 </td> <td> 9.6 </td> </tr> </tbody> </table>