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

更新时间：2013年04月16日 15:28:21 作者：

基于jquery实现表格内容筛选，本文采用两种方式实现，感兴趣的朋友可以参考下哈，希望对你学习jquery筛选有所帮助

 
筛选：<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> 

您可能感兴趣的文章:

jQuery on()方法示例及jquery on()方法的优点
使用jquery on()方法绑定事件是官方推荐的一种方法，接下来跟着小编来学习jquery on()方法，小伙伴快来一起学习吧
2015-08-08
对jQuary选择器的全面总结
下面小编就为大家带来一篇对jQuary选择器的全面总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
Jquery使用小技巧汇总
本文给大家汇总介绍了一下Jquery使用小技巧，算是比较全面了，一共26个小店，非常细致,需要的朋友可以参考下
2015-12-12
利用jqgrid实现上移下移单元格功能
这篇文章主要给大家介绍了关于如何利用jqgrid实现上移下移单元格功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
jQuery的实现原理的模拟代码 -5 Ajax
对于 xhr 对象来说，我们主要通过异步方式访问服务器，在 onreadystatechange 事件中处理服务器回应的内容。简单的 xhr 使用如下所示。
2010-08-08
js弹出层之1：JQuery.Boxy (二)
在《弹出层之1：JQuery.Boxy (一)》中讲到了JQuery.Boxy的基本用法，本次讲下手动创建实例，new一个boxy对象是很容易的，传递一些参数对象就能满足不同的需求了。
2011-10-10
JQuery样式操作、click事件以及索引值-选项卡应用示例
这篇文章主要介绍了JQuery样式操作、click事件以及索引值-选项卡应用,结合实例形式分析了jQuery动态修改css样式、事件响应以及选项卡相关操作技巧,需要的朋友可以参考下
2019-05-05
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
图片等比例缩放在某些情况下还是比较事用的,不过max-width和max-height在ie6中不兼容问题很是郁闷，接下来使用jQuery解决这个问题，感兴趣的各位可以参考下哈
2013-03-03
JQuery设置时间段下拉选择实例
这篇文章主要介绍了JQuery设置时间段下拉选择的实现方法,实例分析了根据时间段设置下拉选项的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2014-12-12
jQuery中:animated选择器用法实例
这篇文章主要介绍了jQuery中:animated选择器用法,实例分析了:animated选择器的功能、定义及匹配动画效果元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-12-12