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 相关文章推荐
jquery实现左右无缝轮播图
Jul 31 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
js中的闭包学习心得
Feb 06 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
php提高网站效率的技巧
2015/09/29 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
img标签中onerror用法
2009/08/13 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
js实现返回顶部效果
2017/03/10 Javascript
Vuex简单入门
2017/04/19 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
Python2与Python3的区别点整理
2019/12/12 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python自省及反射原理实例详解
2020/07/06 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
写给女朋友的检讨书
2014/01/28 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
经费申请报告
2015/05/15 职场文书
电工生产实习心得体会
2016/01/22 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL