Jquery 선택기 - ASP.NET gridview 필터링

Question

해당 확인란이있는 행만 표시된다는 아이디어와 함께 gridview 및 일부 확인란 컨트롤이 있습니다.

나는이 JQuery/javascript의 엉망진창을 실제로 만들었지 만 내 눈을 감추고 몹시 수행합니다. 체크 박스 이름을 사용하여 열 텍스트로 필터링하는 더 간단하고 빠른 방법이 있습니까?

는

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.Red input:checkbox').click(function(event) { 
      if (this.checked) { 
       jQuery(".EntriesGrid tr:hidden .Colour:contains('Red')").parent().show(); 
      } 
      if (!this.checked) { 
       jQuery(".EntriesGrid tr:visible .Colour:contains('Red')").parent().hide(); 
      } 
     }); 
     $('.Green input:checkbox').click(function(event) { 
      if (this.checked) { 
       jQuery(".EntriesGrid tr:hidden .Colour:contains('Green')").parent().show(); 
      } 
      if (!this.checked) { 
       jQuery(".EntriesGrid tr:visible .Colour:contains('Green')").parent().hide(); 
      } 
     }); 
     $('.Blue input:checkbox').click(function(event) { 
      if (this.checked) { 
       jQuery(".EntriesGrid tr:hidden .Colour:contains('Blue')").parent().show(); 
      } 
      if (!this.checked) { 
       jQuery(".EntriesGrid tr:visible .Colour:contains('Blue')").parent().hide(); 
      } 
     }); 
    }); 
</script> 

<span id="filtercheckboxes"> 
    <asp:CheckBox ID="Red" runat="server" CssClass="Red" Width="5px" Checked="True" /> 
    <asp:Label runat="server" Text="Red" AssociatedControlID="Red" ID="RedLabel" 
     CssClass="RedLabel" /> 
    <asp:CheckBox ID="Green" runat="server" CssClass="Green" Width="5px" Checked="True" /> 
    <asp:Label runat="server" Text="Green" AssociatedControlID="Green" ID="GreenLabel" 
     CssClass="GreenLabel" /> 
    <asp:CheckBox ID="Blue" runat="server" CssClass="Blue" Width="5px" Checked="True" /> 
    <asp:Label runat="server" Text="Blue" AssociatedControlID="Blue" ID="BlueLabel" 
     CssClass="BlueLabel" /> 
</span> 

는 ASP.NET의 gridview에서 HTML 출력은 다음과 같습니다

<div class="AspNet-GridView" id="ctl00_ContentPlaceHolder1_GridView1"> 
    <table summary="" class="EntriesGrid"> 
     <thead> 
      <tr class="headerrow"> 
       <th scope="col">header</th> 
       <th scope="col">header</th> 
       <th class="Colour" scope="col">header</th> 
       <th scope="col">header</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>data</td> 
       <td>data</td> 
       <td class="Colour">Red</td> 
       <td>data</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

(이 극적으로 이해하기 쉽게 만드는 희망으로, 원본과 단순화 필터링 실제로 않습니다.) ... 그냥 천천히 그리고 추한, 원래의도에서 작동

Answer 1

을 느리게 한 것은 당신이 당신의 선택기를 정의하는 방식이다

$('.Blue input:checkbox') 

을

jQuery 클래스로 검색하면 페이지의 모든 항목을 먼저 검토해야하기 때문입니다. 그러나 ID를 지정하면 jQuery는 대부분의 페이지를 건너 뛸 수 있으며 특정 DOM 요소에 집중할 수 있습니다.

그래서 더 나은 선택이 될 것이다 :

이 컨트롤의 ID를지고의 문제가 있지만, 물론

$('#ctl00_ContentPlaceHolder1_GridView1 .Blue input:checkbox') 

자바 스크립트는 할 수 사용자 뭔가 같은 동일한 페이지에있는 경우 :

$('#<% GridView1.ClientID %> .Blue input:checkbox')