<!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. StringRedisTemplate操作redis数据

    StringRedisTemplate与RedisTemplate区别点 两者的关系是StringRedisTemplate继承RedisTemplate. 两者的数据是不共通的:也就是说String ...

  2. 【Topcoder 10107】TeamManagement

    Topcoder 10107 题意:给定一棵树,其中有些点是忠诚的,现在要选k个点,每个选择的联通块都必须包含一个忠诚的点,求包含某个点的概率. 思路:考虑树型\(dp\),\(dp(i,j,0/1, ...

  3. 错误：“Manifest merger failed with multiple errors, see logs”

    今天用Android Studio打开以前写个的项目后,出现如下错误:Manifest merger failed with multiple errors, see logs 现象是:  遇到这个问 ...

  4. Linux命令——head/tail

    一.head head主要是用来显示档案的开头至标准输出中,默认打印相应文件的开头10 行. 1)命令格式 head [参数] [文件] 2)常用参数 -q     隐藏文件名-v     显示文件名 ...

  5. Omi框架学习之旅 - 插件机制之omi-touch 及原理说明

    这个插件也能做好多好多的事,比如上拉下拉加载数据,轮播,等一切和运动有关的特效. 具体看我的allowTouch这篇博客,掌握了其用法,在来看它是怎么和omi结合的.就会很简单. 当然使用起来也比较方 ...

  6. Windows下jupyter notebook 修改打开的浏览器

    1. 打开cmd,输入jupyter notebook --generate-config 2. 根据返回的路径打开 C:\Users\Administrator\.jupyter\jupyter_n ...

  7. Luogu3702 SDOI2017 序列计数 矩阵DP

    传送门 不考虑质数的条件,可以考虑到一个很明显的$DP:$设$f_{i,j}$表示选$i$个数,和$mod\ p=j$的方案数,显然是可以矩阵优化$DP$的. 而且转移矩阵是循环矩阵,所以可以只用第一 ...

  8. Luogu1979 NOIP2013D2T3 华容道 搜索、最短路

    题目传送门 题意:给出一个$N \times M$的棋盘,棋盘上有一些块可以移动,有一些块无法移动.$Q$次询问,每一次询问给出三个块$a,b,c$,将$a$块变为空格,空格旁边可移动的块可以与空格交 ...

  9. Vue-认识状态管理vuex

    vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试,可以多个组件共享状态.简单来说,就是共享的状态用state来存放,用mutations来操作state,但是 ...

  10. WPF C#仿ios 安卓 红点消息提示

    原文:WPF C#仿ios 安卓 红点消息提示 先把效果贴出来,大家看看. 代码下载地址: http://download.csdn.net/detail/candyvoice/9730751 点击+ ...