在 jQuery 中的表上应用多个选择过滤器

Question

我有三个选择框，它们使用不同的标准过滤表格。例如，如果用户想要查看具有中等优先级的记录，则选择 Yes On Air Critical & Closed 状态。 Closed 是每一行的数据属性。

我可以这样做，但我的问题是如果用户想再次选择一个过滤器，它只会显示空白结果。这是javascript：

$("#input_filter_priority").change(function() {
        var data = this.value.split(" ");

        var $tr_row = $('#project_table').find("tr:not(.hidden)");
        var priority_column = $('#project_table').find("tr :not(.hidden) td:nth-child(5)");
        if (this.value == "") {
            $tr_row.show();
            return;
        }
        $tr_row.hide();

        if (filtered_row !== null) {
            filtered_row = filtered_row.filter(function() {
                $r = $(this);
                if ($r.is(":contains('" + data + "')")) {
                    return true;
                }
                return false;
            })
                .show();
        } else {
            filtered_row = $tr_row.filter(function() {
                $tr_text = $(this).val();
                $r = $(this);
                if ($r.is(":contains('" + data + "')")) {

                    return true;

                }
                return false;
            })
                .show();
        }


    });



    $("#input_closed_filter").change(function() {
        var data = this.value.split(" ");
        var $tr_row = $('#project_table').find("tr:not(.hidden)");

        if (this.value == "") {
            $tr_row.show();
            return;
        }
        $tr_row.hide();


        if (filtered_row !== null) {
            filtered_row = filtered_row.filter(function() {
                $r = $(this);
                if ($(this).attr('data-closed').match(data)) {
                    return true;
                }
                return false;
            })
                .show();

        } else {
            filtered_row = $tr_row.filter(function() {
                $tr_text = $(this).val();
                if ($(this).attr('data-closed').match(data)) {
                    return true;
                }
                return false;
            })
                .show();
        }


    });


    $("#input_on_air_filter").change(function() {
        var data = this.value.split(" ");

        var $tr_row = $('#project_table').find("tr ");
        var on_air_column = $('#project_table').find("tr td:nth-child(6)");
        if (this.value == "") {
            $tr_row.show();
            return;
        }
        $tr_row.hide();



        if (filtered_row !== null) {

            filtered_row = filtered_row.filter(function() {
                $r = $(this);
                if ($(this).attr('data-critical').match(data)) {
                    return true;
                }
                return false;
            })
                .show();
        } else {
            filtered_row = $tr_row.filter(function() {
                $tr_text = $(this).val();
                $r = $(this);
                if ($(this).attr('data-critical').match(data)) {
                    return true;
                }
                return false;
            })
                .show();
        }
    });

如果用户两次或多次选择相同的过滤器，我该怎么办（假设他改变主意）。

这是相关的JSBin。

Answer 1

这是一个简化/工作版本：

var priorityFilterData=null;
var onAirCriticalFilterData=null;
var closedFilterData=null;


  function applyFilters(){
    var $tr_row = $('#project_table').find("tr");
    $tr_row.hide();//hide all rows by default

    //Show only the rows that meet each filter condition
    $tr_row.filter(function(){    
      var closedFilterCondition = (closedFilterData === null || $(this).attr('data-closed').match(closedFilterData));         
      var onAirFilterCondition = (onAirCriticalFilterData === null || $(this).attr('data-critical').match(onAirCriticalFilterData));            
      var priorityFilterCondition = (priorityFilterData === null || $(this).is(":contains('" + priorityFilterData + "')"));                 
      return closedFilterCondition && onAirFilterCondition && priorityFilterCondition;
    }).show();
  }


  $("#input_closed_filter").change(function() {
    closedFilterData = this.value.split(" ");
    applyFilters();
  });

  $("#input_on_air_filter").change(function() {    
    onAirCriticalFilterData = this.value.split(" ");
    applyFilters();
  });

 $("#input_filter_priority").change(function() {
    priorityFilterData = this.value.split(" ");
    applyFilters();
  });