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

我有一张表，我使用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>

来源

2013-02-10 Kashif

提供包含复选框的表格代码。 – 2013-02-10 03:57:01

我想我能解决这个问题，

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

来源

2013-02-10 03:52:25

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

回答

相关问题