js实现表格筛选功能

本应用就两个主要实现：

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

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

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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • JQuery筛选器全系列介绍

    1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素.例如:$("#id")·element 根据给定的元素名匹配所有元素.例如:$("div")·.class 根据给定的类匹配元素.例如:$(".style1");·* 匹配所有元素.例如:$("*")·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回.例如:$("#id,div,.style1"

  • Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JquerySort.aspx.cs" Inherits="demo_JquerySort" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

  • jQuery筛选器children()案例详解(图文)

    jQuery筛选器children()案例详解(图文)

    jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格式如下: 复制代码 代码如下: .children(expr) 其中children是筛选器的名称,expr是表达式,所有选择器中的表达式都可以用在这,比如按标签名"div",按类名".class",按序号":first"等等,如果表达式为空,那么返

  • Angularjs实现带查找筛选功能的select下拉框示例代码

    前言 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析 我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功

  • jquery遍历数组与筛选数组的方法

    grepgrep()方法用于数组元素过滤筛选 grep(array,callback,invert)array:待过滤数组;callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值.此函数应返回一个布尔值.另外,此函数可设置为一个字符串,当设置为字符串时,将视为"lambda-form"(缩写形式?),其中 a 代表数组元素,i 代表元素索引值.如"a > 0"代表"f

  • iOS仿Uber筛选栏效果

    iOS仿Uber筛选栏效果

    这个是之前项目中用的仿Uber筛选栏,现在要改了,改之前把这个记录下来,万一有人用到了,就可以直接拿来用了,这个是在大神的基础上改的,还行吧,但是觉得有点丑!有需要的可以看一下,方法有点笨,大神勿喷. 1.加载数据 * 加载数据 */ - (void)loadData{ timeArray = @[@"6小时之内",@"12小时之内",@"24小时之内"]; locationArray = @[@"全城",@"附近1

  • AngularJs页面筛选标签小功能

    AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

  • angularjs 实现带查找筛选功能的select下拉框实例

    angularjs 实现带查找筛选功能的select下拉框实例

    一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析:    目标 在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的sele

  • jquery遍历筛选数组的几种方法和遍历解析json对象

    jquery grep()筛选遍历数组 复制代码 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera

  • angular实现商品筛选功能

    一.demo功能分析 1.通过service()创建数据并遍历渲染到页面 2.根据输入框的输入值进行字段查询 3.点击各列实现排序功能. 二.实现 1.1 数据定义与渲染 angular更偏向于是一个MVVM模式的框架,所以它的controller很薄,里面的业务逻辑也是少的,因此应该养成把逻辑写在service或者Factory等angular提供的可以自定义服务的方法中.此次demo通过angular的service方法来注册并定义商品数据. angular.module("app"

随机推荐