Filtre de table JQuery sur plusieurs critères

Question

J'ai actuellement un tableau avec trois listes déroulantes au-dessus. Lorsque l'utilisateur sélectionne une valeur dans chaque liste déroulante pour filtrer les résultats, je souhaite que la table masque les lignes qui ne correspondent pas à TOUS les critères sélectionnés jusqu'à présent. Le plus proche que je l'ai obtenu est la suivante:

$("#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(); 
     } 
    }); 
}); 

Le seul problème avec elle est qu'elle retire toutes les lignes qui contiennent une certaine taille ou une certaine couleur ou d'un certain style au lieu de simplement les lignes qui sont d'une certaine taille et une certaine couleur ET un certain style.

Answer 1

Au lieu de

$.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(); 
    } 
}); 

Avez-vous essayé:

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(); 
    } 

Je pense que peut vous donner ce que vous recherchez.

Answer 2

Dans ce cas:

$.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(); 

Il trouvera toujours un blanc.

Answer 3

Jeff, merci pour votre aide. Pour une raison quelconque, je ne pouvais pas obtenir cela pour filtrer correctement. Il revenait toujours sans lignes. Le code final qui l'a fait fonctionner est:

$("#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(); 
     } 
    }); 
}); 

Des idées pour lesquelles cela a fonctionné? J'ai essayé de spécifier le numéro de colonne dans l'autre sens et je n'ai pas réussi à le faire fonctionner.