基于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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
Javascript玩转继承(一)
May 08 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
PHP运行模式的深入理解
2013/06/03 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python 学习笔记
2008/12/27 Python
python实现调用其他python脚本的方法
2014/10/05 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Python简易版图书管理系统
2019/08/12 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
英语专业学子个人的自我评价
2013/10/02 职场文书
商务日语专业毕业生求职信
2013/10/26 职场文书
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL