JQuery表格展开与内容筛选
单击分类的时候,可以关闭打开相对应的内容。例如点击前台设计组,则只显示前台设计组的内容。再次点击则收缩。
筛选的话就是匹配输入框的内容,如果某行数据存在,则显示出来。
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<style type="text/css"> </style>
<script type="text/javascript">
$(function(){
$('tr.parent').click(function(){
$(this)
.siblings('.child_'+this.id).toggle();//sibling是寻找同级节点
}).click();//加上click可以在界面加载完后使所有的分类收缩,要不然就是全部展开了
$('#filtername').keyup(function(){
$("table tbody tr").hide().filter(":contains('"+($(this).val())+"')").show();//filter寻找匹配的内容
});
});
</script>
<body>
筛选:<input type="text" id="filtername"/>
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>张一</td><td>男</td><td>宁波</td></tr>
<tr class="child_row_01"><td>张二</td><td>女</td><td>杭州</td></tr>
</tbody>
<tbody>
<tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_02"><td>张三</td><td>男</td><td>北京</td></tr>
<tr class="child_row_02"><td>李四</td><td>女</td><td>上海</td></tr>
</tbody>
<tbody>
<tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
<tr class="child_row_03"><td>王力</td><td>男</td><td>广州</td></tr>
<tr class="child_row_03"><td>陈珊</td><td>女</td><td>厦门</td></tr>
</tbody>
</table>
</body>
</html>
JQuery表格展开与内容筛选的更多相关文章
- jquery 表格排序,实时搜索表格内容
jquery 表格排序,实时搜索表格内容 演示 XML/HTML Code <table class="table-sort"> <thead> < ...
- jquery 内容筛选选择器
基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上 注意事项: :contains与:has都 ...
- jQuery 表格
jQuery 表格插件汇总 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分 ...
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- 推荐几款jQuery表格插件
平时项目中,会碰到很多表格元素,这里推荐几款jQuery表格插件. Stackable.js 通常在小屏幕上,表格的表形形式不大好,因为用户会缩放平移,或者就是表格太小,导致数据不可见.Stackab ...
- JQuery表格操作的常用技巧总结
JQuery对表格进行操作的常用技巧. 1.表格奇数行和偶数行分别添加样式 复制代码代码如下: $(function(){ $('tr:odd').addClass("odd") ...
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- Web jquery表格组件 JQGrid 的使用 - 11.问题研究
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
随机推荐
- json输出用法+jquery validate
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- 30个你不可不知的CSS选择器
30个你不可不知的CSS选择器 一.五大基本选择符 1. *(通配符)*通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标 ...
- C# 知识点回顾
一.基础知识 1.主函数:主函数是程序运行的入口. 2.数据类型: 值类型:整形(有符号.无符号)浮点型(float.double.decimal) 字符型(char.datetime) 结构体(范例 ...
- .NET自动更新
asp.net b/s就是布置在服务器的.你这个是要单机版的更新机制,博客园里面好几篇文章说这事呢. http://www.cnblogs.com/cnsharp/archive/2013/04/11 ...
- Qt5 多显示器获取不同显示器的分辨率和位置的方法
Qt5 多显示器获取不同显示器的分辨率和位置的方法 先放官方文档链接:QDesktopWidget - Qt5 Reference 之前一直在用被我乱搞后的ShadowPlayer作为默认播放器,后来 ...
- java后台获取国际化资源文件
//current属性,由于此属性只做赋值操作,不做取值操作,因此没有get方法 private Locale current; public void setCurrent(Locale cur) ...
- OpenCV配置(Java)
配置环境:MyEclipse2013+Jdk1.7(32位)+OpenCV 2.4.8+win8.1(64位) OpenCV安装路径:d:\Users\opencv为例 1. 导入Jar包 ...
- 获取mysqli函数的值和字段名
<?php $mysqli=new mysqli("localhost", "root", "123456", "xsphp ...
- Python成长之路第一篇(4)_if,for,while条件语句
有了以上的基本基础,已经上面写的几个小练习,大家肯定有很多的不满,比如查询为什么查询一次就退出了呢?下面我们来学习条件语句 一.万恶的加号 以前我们在print的时候如果要加上变量都有是使用+来作为连 ...
- QT creator+OpenCV2.4.2+MinGW 在windows下开发环境配置
由于项目开发的原因,需要配置QT creator+OpenCV2.4.2+MinGW开发环境,现对配置方法做如下总结: 1. 下载必备软件 QT SDK for Open Source C++ de ...