2012-11-19 2 views
1

각 행이 주소 인 테이블이 있습니다. 각 행에는 우편 번호가 있지만 숨겨져 있습니다. 입력 한 우편 번호와 일치하는 주소 행 을 필터링하는 입력란이 필요합니다. 검색 할 필드의 이름은 "zip"입니다. 여기 표시되지 않은 특성을 기반으로 테이블 행을 범위로 필터링하는 방법

내 테이블의 :

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

업데이트] DEMO : 여기 의

각 테이블 행

<asp:DataList 
    id="list1" 
    runat="server"> 
    <ItemTemplate> 
    <cc1:SWCLabel 
     runat="server" 
     Text ='<%# Eval("address")%>' 
     zip='<%# Eval("zip")%>' 
      /> 
    </ItemTemplate> 
이 같은 렌더링, 압축이 기간에 속성주의 데모 : 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> 
관련 문제