js实现表格筛选功能


Posted in Javascript onJanuary 18, 2017

js实现表格筛选功能

本应用就两个主要实现:

1.表格的id 和 class之间的命名关系

请看图: 将组名和个人信息联表格联系起来,这样会很好的操作表格

js实现表格筛选功能

HTML代码:

<tr class="parent" id="row_01"><td colspan="3">前台设计组</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 colspan="3">前台开发组</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>

2.就是筛选功能的使用:使用filter联合contains将输入框的字加入contains进行筛选

javascript代码:

//设置列表查询
 $("#filterName").keyup(function () {
  $("table tbody tr").stop().hide() //将tbody中的tr都隐藏
    .filter(":contains('"+($(this).val())+"')").show(); //,将符合条件的筛选出来
  
  });

下面是完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>表格应用</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  .box{
   border: 1px solid #000;
   margin:50px auto;
   width: 340px;
   padding: 10px 10px;
  }
  .box table{
   margin: auto;
  }
  .box .box-top{
   width: 303px;
   margin: 5px auto;
  }
  .box table tr td,th{
   padding: 5px 30px;
   text-align: center;
  }
  .box table .parent{
   background: lightgray;
  }
  .selected{
   background: gray !important;
  }
  .selectHeight{
   background: darkseagreen !important;
  }
 </style>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
 $(function () {
  //默认让王五选中
  $("tr:contains('王五')").addClass("selectHeight")
  //点击让其展示出列表 默认让其都隐藏
  $(".box tr.parent").click(function () {
   $(this)
    .toggleClass("selected")
    .siblings(".child_"+this.id).stop().toggle();
  }).click();//此行代码表示要立即执行
  //设置列表查询
  $("#filterName").keyup(function () {
   $("table tbody tr").stop().hide() //将tbody中的tr都隐藏
    .filter(":contains('"+($(this).val())+"')").show(); //,将符合条件的筛选出来
  });
 });
</script>
<div class="box">
 <div class="box-top">
  <span>筛选:</span><input type="text" id="filterName">
 </div>
 <table>
  <thead>
   <tr>
    <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>浙江宁波</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 colspan="3">前台开发组</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 colspan="3">后台设计组</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>
</div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
javascript中的继承实例代码
Apr 27 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
js放大镜放大购物图片效果
Jan 18 #Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 #Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 #Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 #Javascript
jQuery中的一些小技巧
Jan 18 #Javascript
AngularJS Select(选择框)使用详解
Jan 18 #Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 #Javascript
You might like
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
Smarty变量用法详解
2016/05/11 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
js 学习笔记(三)
2009/12/29 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Python对象与引用的介绍
2019/01/24 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
值传递还是引用传递
2015/02/08 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
前台文员我鉴定
2014/01/12 职场文书
自我鉴定三原则
2014/01/13 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
初中历史教学反思
2016/02/19 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS