2012-11-19 49 views
1

我有一張表格,其中每行是地址。每一行也都有一個郵政編碼,但它是隱藏的。 我需要一個文本框來過濾地址行,它與輸入的zip相匹配。要搜索的字段被命名爲「zip」。如何根據未顯示的屬性過濾表格行爲跨度

這裏是我的表:

<asp:DataList 
    id="list1" 
    runat="server"> 
    <ItemTemplate> 
    <cc1:SWCLabel 
     runat="server" 
     Text ='<%# Eval("address")%>' 
     zip='<%# Eval("zip")%>' 
      /> 
    </ItemTemplate> 

每個錶行被渲染這樣,注意壓縮屬性轉換跨度:

<tr> 
    <td> 
     <span zip="11">address mmomo</span> 
    </td> 
    </tr> 

修訂版DEMO: 這裏的演示:zip文本框與zip完全匹配,但我需要匹配包含文本或從文本開始的zip文本進入: http://jsfiddle.net/QFQ5k/83/

回答

1
$.expr[':'].containsIgnoreCase = function (n, i, m) { 
      return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
     }; 

    var gridAddr = $("#t1"); 
     var filtroCP = $('#txtbox'); 
    $("#txtbox").keyup(function() { 
      gridAddr .find("tr").hide(); 
      var data = this.value.split(" "); 
      var jo = gridAddr .find("tr"); 

      if ($(this).val().length != 0) { 
       $.each(data, function (i, v) { 
        jo = jo.filter(function(index){ 
         return $(this).find("span").attr("zip").search($("#txtbox").val())!=-1;     

        }); 
       }); 
       jo.show(); 
      } 
      else { 
       jo.show(); 
      } 
     });​ 

更新 如果你確定該行的子元素中的任何一個包含屬性「拉鍊」,然後使用這個無論過濾他們的渲染行:

而不是

return $(this).find("span").attr("zip").search($("#txtbox").val())!=-1;

return $(this).find("[zip*='"+$("#txtbox").val()+"']").length>0;

檢查在這裏:http://jsfiddle.net/QFQ5k/89/

+0

這幾乎是我所需要的。但我需要得到拉鍊**包含**輸入文本的行,或者開始,而不是完全匹配。 – anmarti

+0

檢查編輯! –

+0

不匹配任何內容。之前更好。 – anmarti

0

使用linq.js http://linqjs.codeplex.com/

<!DOCTYPE> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.linq.min.js"></script> 
</head> 
<body> 
<table border="1"> 
<tr><td zip="112233">112233</td></tr> 
<tr><td zip="232323">232323</td></tr> 
<tr><td zip="454567">454567</td></tr> 
</table> 
<input type="text" id="filter"> 
<script> 
$('#filter').change(function(){ 
    $("[zip]").show(); 
    $("[zip]").toEnumerable() 
    .Select(function(x){ return x.attr('zip').indexOf($('#filter').val())==-1 ? x : null}) 
    .TojQuery() 
    .each(function(){ 
     $(this).hide(); 
    }); 
}); 
</script> 
</body> 
</html>