基于jquery实现表格内容筛选功能实例解析


Posted in Javascript onMay 09, 2016

当表格内的数据较多时,我们无法一页一页的查找,这时可以通过一个搜索框来实现搜索。

对于这个搜素框,我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选,而不是填完以后点击搜索按钮再执行。
效果图:

基于jquery实现表格内容筛选功能实例解析

实现代码:

<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程序设计有所帮助。

Javascript 相关文章推荐
jQuery Tools tab使用介绍
Jul 14 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 #Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 #Javascript
JavaScript 函数的执行过程
May 09 #Javascript
jQuery绑定事件-多种实现方式总结
May 09 #Javascript
js原型链与继承解析(初体验)
May 09 #Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 #Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 #Javascript
You might like
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
招商专员岗位职责
2014/02/08 职场文书
活动总结格式范文
2014/04/26 职场文书
青春励志演讲稿
2014/04/29 职场文书
单位委托书怎么写
2014/08/02 职场文书
七一讲话心得体会
2014/09/05 职场文书
教师辞职信范文
2015/02/28 职场文书
小学生教师节广播稿
2015/08/19 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis