显示/隐藏和搜索表中的行
Show/Hide and search rows in table
我有一个表,我使用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">
</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>
我想我能解决它,
$("#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.
相关文章:
- 如何使用提交按钮搜索表中的记录
- 数据表-隐藏/显示列
- 如何重置搜索表单中的特定表单元素
- 在网站上提交搜索表单以刮表
- 在导航栏中的搜索表单上使用jQuery for Action Listeners
- Javascript 中的表 - 隐藏/显示列
- 如何将搜索表单仅添加到商店页面和类别页面
- JavaScript即时搜索潜水隐藏与褪色效果
- Wordpress:提交后,我如何在搜索表单中保留市场复选框
- Jquery搜索表可以'找不到带括号的单词
- jQuery:如何创建一个带有多个单选按钮的实时搜索表单
- 在搜索表单中,替换空格或仅使用正则表达式的隐词和数字
- 我想防止搜索表单中出现空字段
- 根据在“搜索表单”中键入的内容隐藏和显示表行
- 尝试在“单击”或“聚焦”GCSE搜索表单输入时触发jquery事件
- 在搜索表单中选择 2
- JQuery数据表-隐藏表直到搜索
- 如何禁用隐藏搜索表行在表排序器插件
- 如果没有输入,禁用搜索按钮,如果页面第一次加载,隐藏搜索表
- 显示/隐藏和搜索表中的行