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 相关文章推荐
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 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显示搜索引擎来的关键词
2014/02/13 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
flexigrid 参数说明
2010/11/23 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
python如何实现异步调用函数执行
2019/07/08 Python
在python中画正态分布图像的实例
2019/07/08 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
给导游的表扬信
2014/01/10 职场文书
元旦寄语大全
2014/04/10 职场文书
婚前协议书
2014/04/15 职场文书
市场调查策划方案
2014/06/10 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
民事赔偿协议书
2014/11/02 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
惊天动地观后感
2015/06/10 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技