Question

我创建了两个过滤器，用于根据两个不同下拉列表中的选定值显示/隐藏表行。激活过滤器的列是user_name和script_name。过滤器的工作方式是它们首先显示所有行，然后隐藏除选定值之外的所有行，但是当我想要使用两个过滤器时，每个过滤器都会取消另一个过滤器。这是我的两个过滤器：

$(document).ready(function(){
    $('#userSelected').change(function() {
        $('tr').show();
        if ($(this).val() == "All") {
        }
        $('tr').filter(function () {
            return $(this).find('td.userName').filter(function () {
                return $(this).text().indexOf($('#userSelected').val()) == -1;
            }).length;
        }).hide();
    });
});

$(document).ready(function(){
    $('#scriptSelected').change(function() {
        $('tr').show();
        if ($(this).val() == "All") {
        }
        $('tr').filter(function () {
            return $(this).find('td.scriptName').filter(function () {
                return $(this).text().indexOf($('#scriptSelected').val()) == -1;
            }).length;
        }).hide();
    });
});

和我的表：

<table class="table table-bordered table-hover" ng-controller="tableCtrl">
    <thead>
    <th>user name</th>
    <th>script name</th>
    <th>cron format<span class="glyphicon glyphicon-question-sign"></span></th>
</thead>
<tbody ng-repeat="(user_id,script_id) in data">
    <tr ng-repeat="(script_id, cron_format) in script_id">
        <td class="userName">{{user(user_id)}}</td>
        <td class="scriptName">{{script(script_id)}}</td>
        <td class="cronFormat"><span contenteditable="true" ng-repeat="l in letters(cron_format) track by $index">{{l}}</span></td>
    </tr>
</tbody>

假设有一行人员使用user_name＆＃34; David＆＃34;和script_name＆＃34;脚本一＆＃34; ...如何在没有过滤器相互抵消的情况下才显示此行？

尝试在http://jsfiddle.net/al_sade/rffbprut/中只显示带有脚本一行的David，您将了解我的意图

Answer 1

尝试以下代码

   $(document).ready(function(){
$('#userSelected').change(function() {
    $('tr').show();        
    if ($('#scriptSelected').val() != "All" && $('#scriptSelected').val() != null) {
        $('tr').filter(function () {
        return $(this).find('td.scriptName').filter(function () {
            return $(this).text().indexOf($('#scriptSelected').val()) == -1;
        }).length;
    }).hide();
    }
    if ($('#userSelected').val() != "All" && $('#userSelected').val() != null) {
        $('tr').filter(function () {
        return $(this).find('td.userName').filter(function () {
            return $(this).text().indexOf($('#userSelected').val()) == -1;
        }).length;
    }).hide();
    }

});
});

 $(document).ready(function(){
$('#scriptSelected').change(function() {
    $('tr').show();        
    if ($('#scriptSelected').val() != "All" && $('#scriptSelected').val() != null) {
        $('tr').filter(function () {
        return $(this).find('td.scriptName').filter(function () {
            return $(this).text().indexOf($('#scriptSelected').val()) == -1;
        }).length;
    }).hide();
    }
    if ($('#userSelected').val() != "All" && $('#userSelected').val() != null) {
        $('tr').filter(function () {
        return $(this).find('td.userName').filter(function () {
            return $(this).text().indexOf($('#userSelected').val()) == -1;
        }).length;
    }).hide();
    }

});
});

在这里工作 https://jsfiddle.net/rffbprut/1/

Answer 2

只需创建一个过滤器函数，并在其中一个下拉值更改时调用它：

function update()
{
    var selectedScript = $('#scriptSelected').val(),
    selectedUser = $('#userSelected').val();

    $('tr')
      .show();
      .filter(function () {
        var matchedUserName = selectedUser == 'All' || $(this).find('td.userName').filter(function () {
            return $(this).text().indexOf(selectedUser) != -1;
        }).length;

        var matchedScriptName = selectedScript == 'All' || $(this).find('td.scriptName').filter(function () {
                return $(this).text().indexOf(selectedScript) != -1;
            }).length;

        return !matchedUserName || !$matchedScriptName;
    }).hide();
}

jQuery(function($) {
    $('#userSelected,#scriptSelected').change(update);
});

两个jquery过滤器相互抵消

2 个答案: