표의 행 표시/숨기기 및 검색

Question

quicksearch jQuery 플러그인을 사용하여 검색하는 표가 있습니다 (행 표시/숨기기). 같은 테이블에서 나는 사용자가 체크 박스 (테이블의 첫 번째 열)가 체크 된 모든 행을 표시/숨기고, 사용자가 행 버튼을 클릭하면 (버튼이 테이블 밖에 있음) 클릭해야합니다. 테이블에서 데이터를 검색 할 때 숨겨진 행 (확인란 선택)이 표시됩니다. 두 기능을 모두 어떻게 수행 할 수 있습니까?

숨겨진 행 (확인란이 선택되어 있고 사용자가 '행 전환'을 클릭 한 경우)은 표에서 사용자 검색 데이터가 숨겨져 있으며 그 반대의 경우도 마찬가지입니다.

$(function() { 
    $('input#gridSearch').quicksearch('#<%=gvActivities.ClientID %> tbody tr'); 

    $('.showhiderows').click(function() { 
     $('#<%=gvActivities.ClientID %>').find("input[type=checkbox]:checked").closest('tr').toggle(); 
    }); 
}); 

확인란의 GridView에서 첫 번째 열입니다 :

다음은 내 jQuery를합니다. 그냥 헤더와 첫 번째 행,

<input type="button" id="btnShowHide" class="showhiderows" value="Toggle Selected Rows" /> 

테이블 구조 :

버튼/숨기기 선택한 행을 보여 나는 그것을 해결할 수 있다고 생각

<table class="gvv1" id="MainContent_gvActivities"> 
    <tr style="background-color: buttonface;"> 
     <th scope="col"> 
      &nbsp; 
     </th> 
     <th scope="col"> 
      Cluster 
     </th> 
     <th scope="col"> 
      Activity 
     </th> 
     <th scope="col"> 
      Data 
     </th> 
     <th scope="col"> 
      Target 
     </th> 
     <th scope="col"> 
      Achieved 
     </th> 
    </tr> 
    <tr> 
     <td> 
      <input id="longIdGeneratedByCode" type="checkbox"/> 
     </td> 
     <td style="width: 50px;"> 
      ER. 
     </td> 
     <td style="width: 250px;"> 
      Establishment 
     </td> 
     <td style="width: 460px;"> 
      Number of 
     </td> 
     <td style="width: 70px;"> 
      Text 
     </td> 
     <td style="width: 70px;"> 
      Text2 
     </td> 
    </tr> 
</table> 

Answer 1

,

$("#showhidetr").on("click", function(){ 
    if($(this).is(':checked')){ 
    $("#myTable").find("input[type='checkbox']").each(function(){ 
     if($(this).is(':checked')){ 
     $(this).parent().parent().hide(); 
     } 
    }) 
    } else { 
    $("#myTable").find("input[type='checkbox']").each(function(){ 
     if($(this).is(':checked')){ 
     $(this).parent().parent().show(); 
     } 
    }) 
    } 
}) 

<input type='checkbox' id="showhidetr"> 
<table id="myTable"> 
    <tr> 
    <td><input type='checkbox'></td> 
    <td>Mary</td> 
    </tr> 
    <tr> 
    <td><input type='checkbox'></td> 
    <td>John</td> 
    </tr> 
    <tr> 
    <td><input type='checkbox'></td> 
    <td>Michael</td> 
    </tr> 
</table> 

showhidetr checkbox를 클릭하면, 스크립트는 테이블의 체크 박스를 찾고 tr를 숨 깁니다.