基于jquery实现表格内容筛选功能实例解析
更新时间：2016年05月09日 17:12:59 作者：JsonZhang_ZY
对于表格来说，当数据比较多的时候，我们无法一页一页的查找，这样我们就可以进行筛选操作，这篇文章主要为大家详细介绍了基于jquery实现表格内容筛选功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
当表格内的数据较多时，我们无法一页一页的查找，这时可以通过一个搜索框来实现搜索。
对于这个搜素框，我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选，而不是填完以后点击搜索按钮再执行。
效果图：
实现代码：
<html>
<head>
<meta charset="utf-8" />
<script src="jquery-1.3.2.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script>
$(function () {
$("tr.parent").click(function () {
$(this)
.siblings('.child_'+this.id).toggle();
});
$("tr.parent").addClass("selected");
$("#searchbox").keyup(function () {
$("table tbody tr").hide()
.filter(":contains('"+($(this).val())+"')").show();//filter和contains共同来实现了这个功能。
}).keyup();
});
</script>
<title></title>
</head>
<body>
<label>筛选</label>
<input type="text" id="searchbox"/>
<table>
<thead>
<tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td>前台设计组</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>
<tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="parent" id="row_02"><td>前台设计组</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>
<tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
<tr class="parent" id="row_03"><td>前台设计组</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>
<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.1.9以前的版本，可以使用$.browser很轻松的判断浏览器的类型和版本，但是在1.9中和以后的版本中，$.browser已经被删除，下面就介绍一下如何实现此功能，希望能够给需要的朋友带来帮助2016-01-01
模仿jQuery each函数的链式调用实现代码。2009-07-07
这篇文章主要介绍了jquery手风琴特效插件,效果非常棒，需要的朋友可以参考下2015-02-02
系统默认情况下，使用Tab按键切换页面元素的焦点，有没有想过回车键Enter也可以实现这种功能，并且具有良好的用户体验2014-05-05
这篇文章主要介绍了jQuery EasyUI Tab 选项卡问题小结,在项目开发阶段很多朋友都遇到过此问题，其实解决办法很简单的，下面小编给大家分享下问题原因及解决办法，需要的朋友可以参考下2016-08-08
这篇文章主要介绍了jquery实现鼠标滑过小图时显示大图的方法,涉及图片及鼠标操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery实现简单日期格式化功能,涉及jQuery调用javascript针对日期格式转换扩展实现日期格式化功能相关操作技巧,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了jquery图片滚动放大效果，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
一直对stop的用法一知半解，今天抽点时间学习下jQuery stop()用法实例详解的相关知识，特此分享脚本之家平台，供大家参考2016-07-07
本文给大家分享的是javascript实现简单的日期输入格式化控件的方法和思路，非常的细致实用，推荐给小伙伴们2015-03-03
最新评论