<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title></title>
 <style>

    table{
   border:1px solid #000;
   width: 400px;
   text-align: center;
   border-collapse: collapse;
  }
  thead tr{
   border: 1px solid #000;
  }
 </style>
</head>
<body>
  <table>
  <thead>
    <tr>
    <th colspan="3">筛选：<input id="filterName" type="text"/></th>
   </tr>
  </thead>
  <tbody>
    <tr class="child_row_01"><td>张山1</td><td>男</td><td>浙江宁波</td></tr>
    <tr class="child_row_01"><td>王山2</td><td>男</td><td>浙江宁波</td></tr>
    <tr class="child_row_02"><td>李山3</td><td>男</td><td>浙江余杭</td></tr>
    <tr class="child_row_02"><td>张山4</td><td>男</td><td>浙江宁波</td></tr>
    <tr class="child_row_03"><td>李山5</td><td>男</td><td>浙江宁波</td></tr>
    <tr class="child_row_03"><td>张山6</td><td>男</td><td>浙江宁波</td></tr>
  </tbody>
 </table>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
  $("#filterName").keyup(function(){
  $("table tbody tr").hide()
   .filter(`:contains('${$(this).val()}')`).show();
 });
});

</script>
</html>

Jquery 组 tbale表格筛选的更多相关文章

  1. Jquery 组 tbale表格滚动条

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  2. Jquery 组 tbale表格隔行变色

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  3. jquery实现多条件筛选特效代码分享

    本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下:jquery实现的多条件搜索表单带日期选择表格表单效果源码,是一段实现了多个条件筛选搜索的特效代码,多条件拥有时间.地点. ...

  4. jQuery-1.9.1源码分析系列（二）jQuery选择器续2——筛选

    前面分析了选择器的结构和几个解析函数,接下来分析jQuery对象的伪类选择器.这里所谓的jQuery对象的伪类选择器就是从已有的jQuery对象(元素集合)中筛选出指定的集合出来. 4.    jQu ...

  5. jquery隐藏table表格的某一列

    jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列

  6. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  7. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  8. MySql中having字句对组记录进行筛选使用说明

    having字句可以让我们筛选成组后的各种数据 having的用法 having字句可以让我们筛选成组后的各种数据,where字句在聚合前先筛选记录,也就是说作用在group by和having字句前 ...

  9. 第84天：jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. ceph 集群故障恢复

    集群规划配置 master1    172.16.230.21master2    172.16.230.22master3 172.16.230.23node1 172.16.230.26node2 ...

  2. 最短路径算法dijkstra的matlab实现

    function Dijkstra(Graph, source): 2 3      create vertex set Q 4 5      for each vertex v in Graph: ...

  3. all与any的用法

    all函数:检测矩阵中是否全为非零元素 any函数:检测矩阵中是否有非零元素,如果有,则返回1,否则,返回0.用法和all一样 语法: B = all(A) B = all(A, dim) 复制代码 ...

  4. Echo团队Alpha冲刺随笔 - 第四天

    项目冲刺情况 进展 前端:完成了差不多一半,小程序部分界面基本完工,WEB端也完成了一部分 后端:也完成了大半了 问题 后端文件上传还没解决 心得 进度还行,团队配合都还不错 今日会议内容 黄少勇 今 ...

  5. C# 语法一 构造函数

    1.构造函数的执行顺序 2.静态变量和成员变量的区别 代码示例: using System; using System.Collections.Generic; using System.Linq; ...

  6. 《Head First 设计模式》[02] 观察者模式

    1.观察者模式 1.1 形象地认识观察者模式 报社的业务是出版报纸 用户像某家报社订阅了报纸,那么一旦报社有新的报纸,就会送到用户处.只要是订户,就一直会收到新报纸: 当用户不再想看报纸时,取消订阅, ...

  7. Apache cxf暴露接口以及客户端调用之WebService初步理解

    在我们真实的项目中,经常会调用别人提供给我们的接口,或者在自己的团队中, restful风格的前后端分离也经常会提供一个后端接口暴露出去供app,或者.net/C/C++程序员去调用,此时就需要使用到 ...

  8. BZOJ4860 BJOI2017 树的难题 点分治、线段树合并

    传送门 只会线段树……关于单调队列的解法可以去看“重建计划”一题. 看到路径长度$\in [L,R]$考虑点分治.可以知道,在当前分治中心向其他点的路径中,始边(也就是分治中心到对应子树的根的那一条边 ...

  9. Luogu3763 TJOI2017 DNA NTT/SA

    传送门 两种做法: ①SA 将两个串拼在一次建立后缀数组,把\(height\)数组求出来,然后对于\(S\)中每一个长度为\(T\)的串和\(T\)暴力匹配,每一次找到最长的\(LCP\)匹配,如果 ...

  10. Android开发——ListView使用技巧总结（一）

    )还有一点就是要控制异步任务的执行频率,因为当用户频繁的上下滑动,会瞬间产生上百个异步任务,会带来无意义的大量的UI更新操作,因此可以考虑在列表滑动时停止进行异步任务,直到列表停下来. //判断列表的 ...