<!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. api接口简短实力

    无参数传递 public function actionJiekou(){ $url = 'http://wap.guoshihui.com/_static/wap/video/startVideo. ...

  2. Arduino IDE for ESP8266 教程(一) 局域网 网页查看数据 不控制

    淘宝:https://detail.tmall.com/item.htm?id=536504922008&spm=a1z09.2.0.0.5e160c66c76b3g&_u=e1qf7 ...

  3. Qt+QGis二次开发：创建临时图层并添加要素

    开发环境:Win10 + VS2010 + Qt 4.8.6 + QGis 2.14.4 其实本文实现的功能类似于QGis中“添加文本数据图层”的一个简化版,本文不会涉及到对话框的使用,不通过与用户互 ...

  4. [julia]本地离线安装package

    1.引言 julia最近十分受关注,其结合了python的通用性,Ruby的动态性,C的代码运行速度,R的包管理和数据分析功能,perl的字符串处理能力,lisp的宏能力,matlab的矩阵计算规则, ...

  5. ASP.NET Core中如果Response.HasStarted已经为true，就不能更改Response.Cookies和Response.Headers等属性的值了

    最近我在ASP.NET Core中做了一个中间件CustomizedMiddleware,要说该中间件的功能也很简单,其实就是往HttpResponse中添加一个Cookie而已,但是我将添加Cook ...

  6. 如何把js的代码写的更加容易维护(一)--面向对象编程

    总是头疼javascript的代码写起来不可维护,那么看看下面的代码: (function (w, $) { var app = { init: function () { var me = this ...

  7. BZOJ4237 JOISC2014 稻草人 CDQ分治、单调栈

    传送门 题意:给出平面上$N$个点,求满足以下两个条件的矩形:①左下角与右上角各有一个点:②矩形内部没有点.$N \leq 2 \times 10^5$,所有数字大于等于$0$,保证坐标两两不同 最开 ...

  8. VB6 变量定义作用域的一个奇特形式

    C#或JAVA 下面的i定义是只会限定在if 条件块里的: if (1 == 2) { int i = 000; } else { i = 111;// 错误,未定义. } i = 222;//错误 ...

  9. WPF模拟探照灯文字

    原文:WPF模拟探照灯文字 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/article/details/1835936 ...

  10. [Python]Python Class 中的 函数定义中的 self

    In [80]: class MyClass001: ....: def selfDemo(self): ....: print 'My Demo' ....: In [81]: p = MyClas ...