关于多个标准的jQuery表过滤器

时间:2009-04-28 20:35:38

标签: jquery filtering

我目前有一张桌子,上面有三个下拉列表。当用户从每个下拉列表中选择一个值来过滤结果时,我希望该表隐藏不符合到目前为止所选标准的所有行。我得到的最接近的是:

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

唯一的问题是它会拉回包含特定大小或某种颜色或某种样式的所有行,而不仅仅是具有特定大小和特定颜色以及某种样式的行。

3 个答案:

答案 0 :(得分:2)

在那种情况下:

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

总会找到一个空白。

答案 1 :(得分:0)

而不是

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

我认为这可能会给你你想要的东西。

答案 2 :(得分:0)

杰夫,谢谢你的帮助。出于某种原因,我无法正确过滤。它总是回来没有行。让它发挥作用的最终代码是:

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

为什么这有效?我尝试以另一种方式指定列号,但无法使其工作。