Показать/скрыть строки поиска в таблице

Question

У меня есть таблица, которую я ищу (показать/скрыть строки), используя quicksearch плагин jQuery. В той же таблице я должен показать/скрыть все строки, где установлен флажок (первый столбец в таблице), если пользователь нажимает кнопку переключения строки (кнопка находится за пределами таблицы). Когда я просматриваю данные в таблице, скрытые строки (флажок отмечен) становятся видимыми. Как я могу достичь обеих функциональных возможностей.

Если все скрытые строки (если флажок установлен, и пользователь нажал «переключение строк»), останется скрытым при поиске данных в таблице и наоборот.

Ниже мой JQuery:

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

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

Checkbox является первой колонки в GridView.

Кнопка, чтобы показать/скрыть выбранные строки:

<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, скрипт ищет флажок в таблице и скрывает его tr.