jquery表格内容筛选实现思路及代码


Posted in Javascript onApril 16, 2013
筛选:<input type="text" id="sea" /> 
<table width="100%" id="se"> 
<thead> 
<tr><th></th><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>男10</td><td>武汉1</td></tr> 
<tr class="child_row_01"><td></td><td>大爷</td><td>男9</td><td>武汉2</td></tr> 
<tr class="child_row_01"><td></td><td>大爷</td><td>男8</td><td>武汉3</td></tr> 
<tr class="parent" id="row_02"><td colspan="3">二班</td></tr> 
<tr class="child_row_02"><td></td><td>大爷</td><td>男7</td><td>武汉4</td></tr> 
<tr class="child_row_02"><td></td><td>大爷</td><td>男6</td><td>武汉5</td></tr> 
<tr class="child_row_02"><td></td><td>大爷</td><td>男5</td><td>武汉6</td></tr> 
<tr class="child_row_02"><td></td><td>大爷</td><td>男4</td><td>武汉7</td></tr> 
<tr class="parent" id="row_03"><td colspan="3">三班</td></tr> 
<tr class="child_row_03"><td></td><td>大爷</td><td>男3</td><td>武汉8</td></tr> 
<tr class="child_row_03"><td></td><td>大爷</td><td>男2</td><td>武汉9</td></tr> 
<tr class="child_row_03"><td></td><td>大爷</td><td>男1</td><td>武汉10</td></tr> 
</tbody> 
</table> 
<script type="text/javascript" > 
$(function(){ 
$("#sea").keyup(function(){ 
$("#se tbody tr").hide().filter(":contains('"+$(this).val()+"')").show(); 
}).keyup(); 
}); 
</script>

// jquery表格内容筛选 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="../css/jquery-1.6.2.js"></script> 
<script> 
$(function(){ 
$('tr.parent').click(function(){ 
$(this).toggleClass("selected").siblings('.child_'+this.id).toggle(); 
}); 
}); 
</script> 
<style> 
.selected{background:red}; 
</style> 
<title>Untitled Document</title> 
</head> 
<body> 
<table> 
<thead> 
<tr> 
<th>姓名</th> 
<th>年龄</th> 
</tr> 
</thead> 
<tbody> 
<tr class="parent" id="row_01"> 
<td colspan="2">人力部</td> 
</tr> 
<tr class="child_row_01"> 
<td >脚本</td> 
<td>20</td> 
</tr> 
<tr class="child_row_01"> 
<td >脚本</td> 
<td >20</td> 
</tr> 
<tr class="child_row_01"> 
<td >脚本</td> 
<td >20</td> 
</tr> 
<tr class="parent" id="row_02"> 
<td colspan="2">技术部</td> 
</tr> 
<tr class="child_row_02"> 
<td >脚本</td> 
<td >20</td> 
</tr> 
<tr class="child_row_02"> 
<td >脚本</td> 
<td >20</td> 
</tr> 
<tr class="child_row_02"> 
<td >脚本</td> 
<td >20</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 空位补零实现代码
Feb 26 Javascript
javascript使用activex控件的代码
Jan 27 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
JSON格式化输出
Nov 10 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
jQuery选择器实例应用
Jan 05 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
js+canvas实现画板功能
Sep 13 Javascript
js实现图片轮换效果代码
Apr 16 #Javascript
js相册效果代码(点击创建即可)
Apr 16 #Javascript
jQuery实现点击标题输入详细信息
Apr 16 #Javascript
jQuery图片的展开和收缩实现代码
Apr 16 #Javascript
js变换显示图片的实例
Apr 16 #Javascript
在jQuery中 常用的选择器介绍
Apr 16 #Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 #Javascript
You might like
php中实现简单的ACL 完结篇
2011/09/07 PHP
php二维数组排序详解
2013/11/06 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php实现网页端验证码功能
2017/07/11 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
JSON相关知识汇总
2015/07/03 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
浅谈node的事件机制
2017/10/09 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
python实现自动解数独小程序
2019/01/21 Python
Python读取stdin方法实例
2019/05/24 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Python定时器线程池原理详解
2020/02/26 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
办公室副主任岗位职责
2013/11/25 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
给护士表扬信
2014/01/19 职场文书
给面试官的感谢信
2014/02/01 职场文书
酒后驾车标语
2014/06/30 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
对讲机的最大通讯距离是多少
2022/02/18 无线电
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL