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.事件 ...
随机推荐
- 解决 Boot Camp 虚拟机升级到 Windows 10 后 Parallels Desktop 不能识别的问题
最近几天 Win10 正式版开始推送了,对于喜欢折腾的博主,在第一时间就把 Mac 中 Boot Camp 从 Win7 升级到 Win10,初步体验还不错,等博主用过一段时间之后,再来给大家分享使用 ...
- Mac下Mysql启动异常["ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)"]
在mac下使用brew安装mysql,之前没有使用过,今天启动的时候发现启动不了 huijundeMacBook-Pro:bin huijunzhang$ mysql ERROR (HY000): C ...
- CSS样式做圆角
我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做: 是什么方式导致这项技术表现得这么了不起呢(What makes this ...
- dom操作例子
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 在Linux上使用cmake创建CodeBlocks工程
最近在linux上使用cmake,对于使用GUI习惯的还真不能适应,真是想尽一切办法把原来使用cmake的工程创建成CodeBlocks工程.工程小了还能接受,工程大了太麻烦了. 看了一下cmake的 ...
- Ubuntu 12.04 下安装git
---恢复内容开始--- 1.安装build-essential. 列出Git相关包(git-core 和 git-doc)所以来的各个安装包并安装: sudo apt-get build-dep g ...
- Uber License for Android
Uber license for android list: 1.Butter Knife: 项目地址:https://github.com/JakeWharton/butterknife 这个开源库 ...
- Android 大神博客汇集
非常给力的CSDNBlog和个人Blog,这些Blog都有一个共同的特点,即内容详实,讲解透彻,也算是给后来的初学者指一条路吧!只要你下定决心跟随强者的脚步,成为人们眼中的大神,只不过是时间问题! 下 ...
- python3.5之string
刚开始学习python变成, 这勉强算是第一个博客吧, 主要记录了一下 字符串 中的方法, 不太准确,或者是错误的地方, 请大家指点 str1 = "GooGle" str2 = ...
- 手工制作OTG连接线 让小白实现OTG功能
说到OTG功能,很重要的一点是,现在不少网上的720P高清视频体积已经超过4GB,我的小白也支持exFat及NTFS磁盘格式,可存储播放大于4GB的高清影音文件,也能通过OTG读取播放NTFS格式U盘 ...