jQuery Table Filter по нескольким критериям

Question

В настоящее время у меня есть таблица с тремя выпадающими списками над ней. Поскольку пользователь выбирает значение из каждого раскрывающегося списка для фильтрации результатов, я бы хотел, чтобы таблица скрывала строки, которые не соответствуют ВСЕМ критериям, выбранным до сих пор. Самое близкое, что я получил, это:

  $("#ReportControls #InventoryReports select").change(function(){

    $("#Report table tbody tr").hide();  

    var filterArray = new Array();
    filterArray[0] = $("#ddlStyle :selected").text()
    filterArray[1] = $("#ddlSize :selected").text()
    filterArray[2] = $("#ddlColor :selected").text()

    $.each(filterArray, function(i){
        if (filterArray[i].toString() != "Style" && filterArray[i].toString() != "Size" && filterArray[i].toString() != "Color")
        {
           $("#Report table tbody tr").find("td:contains('" + filterArray[i].toString() + "')").parents("tr").show();
        }
    });
});

Единственная проблема с ним заключается в том, что он возвращает все строки, которые содержат определенный размер или определенный цвет или определенный стиль, а не только строки, которые имеют определенный размер И определенный цвет И определенный стиль.

Answer 1

В этом случае:

$.each(filterArray, function(i){
if (filterArray[i].toString() == "Style" || filterArray[i].toString() == "Size" || filterArray[i].toString() == "Color") 
  {
  filterArray[i] == ""
  }
});
$("#Report table tbody tr").find("td:contains('" + filterArray[0].toString() + "')").find("td:contains('" + filterArray[1].toString() + "')").find("td:contains('" + filterArray[2].toString() + "')").parents("tr").show();

Он всегда найдет пробел.

Answer 2

Джефф, спасибо за вашу помощь. По некоторым причинам я не мог заставить это фильтровать правильно. Это всегда возвращалось без рядов. Последний код, который заставил его работать:

$("#ReportControls #InventoryReports select").change(function(){

    $("#Report table tbody tr").hide();          
    var filterArray = new Array();
    filterArray[0] = $("#ddlStyle :selected").text()
    filterArray[1] = $("#ddlSize :selected").text()
    filterArray[2] = $("#ddlColor :selected").text()

    $.each(filterArray, function(i){
        if (filterArray[i].toString() == "Style" || filterArray[i].toString() == "Size" || filterArray[i].toString() == "Color")
        {
            filterArray[i] = "";
        }
    });   
    $("#Report table tbody tr").each(function(){
        if ($(this).find("td:eq(0):contains('" + filterArray[0].toString() + "')").html() != null
            && $(this).find("td:eq(1):contains('" + filterArray[1].toString() + "')").html() != null
            && $(this).find("td:eq(2):contains('" + filterArray[2].toString() + "')").html() != null)
        {
            $(this).show();
        }
    });  
});

Есть идеи, почему это сработало? Я попытался указать номер столбца другим способом и не смог заставить его работать.

Answer 3

вместо

    $.each(filterArray, function(i){
    if (filterArray[i].toString() != "Style" && filterArray[i].toString() != "Size" && filterArray[i].toString() != "Color")
    {
       $("#Report table tbody tr").find("td:contains('" + filterArray[i].toString() + "')").parents("tr").show();
    }
});

Вы пробовали:

var bolPass = true;
$.each(filterArray, function(i){
if (filterArray[i].toString() == "Style" || filterArray[i].toString() == "Size" || filterArray[i].toString() == "Color") 
  {
  bolPass = false
  }
});
if (bolPass) 
  {
  $("#Report table tbody tr").find("td:contains('" + filterArray[0].toString() + "')").find("td:contains('" + filterArray[1].toString() + "')").find("td:contains('" + filterArray[2].toString() + "')").parents("tr").show();
  }

Я думаю, что это может дать вам то, что вы ищете.