单击分类的时候,可以关闭打开相对应的内容。例如点击前台设计组,则只显示前台设计组的内容。再次点击则收缩。

筛选的话就是匹配输入框的内容,如果某行数据存在,则显示出来。

 <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表格展开与内容筛选的更多相关文章

  1. jquery 表格排序,实时搜索表格内容

    jquery 表格排序,实时搜索表格内容   演示 XML/HTML Code <table class="table-sort"> <thead> < ...

  2. jquery 内容筛选选择器

    基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上 注意事项: :contains与:has都 ...

  3. jQuery 表格

    jQuery 表格插件汇总     本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分 ...

  4. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  5. 推荐几款jQuery表格插件

    平时项目中,会碰到很多表格元素,这里推荐几款jQuery表格插件. Stackable.js 通常在小屏幕上,表格的表形形式不大好,因为用户会缩放平移,或者就是表格太小,导致数据不可见.Stackab ...

  6. JQuery表格操作的常用技巧总结

    JQuery对表格进行操作的常用技巧. 1.表格奇数行和偶数行分别添加样式 复制代码代码如下: $(function(){  $('tr:odd').addClass("odd") ...

  7. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  8. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. 解决 Boot Camp 虚拟机升级到 Windows 10 后 Parallels Desktop 不能识别的问题

    最近几天 Win10 正式版开始推送了,对于喜欢折腾的博主,在第一时间就把 Mac 中 Boot Camp 从 Win7 升级到 Win10,初步体验还不错,等博主用过一段时间之后,再来给大家分享使用 ...

  2. 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 ...

  3. CSS样式做圆角

    我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做:  是什么方式导致这项技术表现得这么了不起呢(What makes this ...

  4. dom操作例子

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 在Linux上使用cmake创建CodeBlocks工程

    最近在linux上使用cmake,对于使用GUI习惯的还真不能适应,真是想尽一切办法把原来使用cmake的工程创建成CodeBlocks工程.工程小了还能接受,工程大了太麻烦了. 看了一下cmake的 ...

  6. Ubuntu 12.04 下安装git

    ---恢复内容开始--- 1.安装build-essential. 列出Git相关包(git-core 和 git-doc)所以来的各个安装包并安装: sudo apt-get build-dep g ...

  7. Uber License for Android

    Uber license for android list: 1.Butter Knife: 项目地址:https://github.com/JakeWharton/butterknife 这个开源库 ...

  8. Android 大神博客汇集

    非常给力的CSDNBlog和个人Blog,这些Blog都有一个共同的特点,即内容详实,讲解透彻,也算是给后来的初学者指一条路吧!只要你下定决心跟随强者的脚步,成为人们眼中的大神,只不过是时间问题! 下 ...

  9. python3.5之string

    刚开始学习python变成, 这勉强算是第一个博客吧, 主要记录了一下 字符串 中的方法, 不太准确,或者是错误的地方, 请大家指点 str1 = "GooGle" str2 = ...

  10. 手工制作OTG连接线 让小白实现OTG功能

    说到OTG功能,很重要的一点是,现在不少网上的720P高清视频体积已经超过4GB,我的小白也支持exFat及NTFS磁盘格式,可存储播放大于4GB的高清影音文件,也能通过OTG读取播放NTFS格式U盘 ...