在表格中显示/隐藏和搜索行答案

【问题标题】：Show/Hide and search rows in table在表格中显示/隐藏和搜索行
【发布时间】：2013-01-25 12:14:07
【问题描述】：

我有一个使用quicksearch jQuery 插件搜索（显示/隐藏行）的表。在同一个表中，如果用户单击切换行按钮（按钮在表外），我必须显示/隐藏选中复选框（表中的第一列）的所有行。当我在表中搜索数据时，隐藏的行（选中的复选框）变得可见。如何实现这两种功能。

当用户在表格中搜索数据时，所有隐藏行（选中复选框并且用户单击“切换行”）将保持隐藏状态，反之亦然。

以下是我的 jQuery：

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

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

复选框是 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>

【问题讨论】：

提供包含复选框的表格代码。

标签： javascript jquery gridview jquery-callback

【解决方案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。

【讨论】：