显示/隐藏和搜索表中的行

Question

I have a table which I search (show/hide rows) using quicksearch jQuery plugin. In same table I have to show/hide all the rows where checkbox (first column in table) is checked, if user click toggle row button ( button is outside table). When I search data in table the hidden rows (checkbox checked) become visible. How can I achieve both functionality.

Where all the hidden rows (where checkbox is checked and user has clicked 'toggle rows') will remain hidden when user search data in table and vice versa.

Following is my jQuery:

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

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

Checkbox is the first column in GridView.

Button to show/hide selected rows:

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

Table Structure, Just header and first row:

<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

I think I can solve it,

$("#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>

When you click showhidetr checkbox, the script looks for a checked checkbox in the table and hide its tr.