1

各行がアドレスであるテーブルがあります。各行には郵便番号もありますが、非表示になっています。入力した郵便番号と一致する住所行をフィルタリングするためのテキストボックスが必要です。検索するフィールドの名前は「zip」です。

ここに私のテーブルがあります：

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

各テーブル行は次のようにレンダリングされます。スパンへの zip 属性に注意してください。

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

更新 されたデモ: デモは次のとおりです: zip テキストボックスは zip と完全に一致しますが、入力されたテキストを含むか開始する zip と一致する必要があります: http://jsfiddle.net/QFQ5k/83/

4

2 に答える 2

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

更新 行の子要素のいずれかに属性「zip」が含まれていることが確実な場合は、これを使用して、レンダリングに関係なく行をフィルタリングします。

それ以外の

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

書きます

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

ここで確認してください：http://jsfiddle.net/QFQ5k/89/

于 2012-11-19T12:40:34.240 に答える
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>
于 2012-11-19T13:09:38.197 に答える