<!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. kafka libjvm 报错

    kafka集群 kafka-0 出现报错信息 # # A fatal error has been detected by the Java Runtime Environment: # # SIGS ...

  2. gitlab 使用流程

    gitlab 使用流程 1. 开发人员写代码,开发产品. 2. 测试人员进行测试,如果发现bug, 填写 Issues - List - new issus 3. 开发人员修复bug, 从master ...

  3. Qt+QGIS二次开发：开发环境搭建（超级详细）

    原文链接: 1.qgis二次开发环境搭建(超级详细) 2.QGIS开发教程(1)——QGIS开发准备工作 3.QGIS(2.18.15 源码)+Qt(5/5.9.3)+VS2015(X64)编译

  4. Python基础（5）——函数

    函数 定义 #函数定义 def calc(x,y): res = x**y return res #返回函数执行结果 calc() #调用函数 关键参数 正常情况下,给函数传参数要按顺序,不想按顺序就 ...

  5. 20175310 《Java程序设计》第1周学习总结（1）安装虚拟机

    20175310 <Java程序设计>第1周学习总结(1)安装虚拟机 开学前老师在蓝墨云班课上上传了预备作业,其中有一个就是安装Linux操作系统,参考了<>,下载安装Virt ...

  6. PAT A1151 LCA in a Binary Tree （30 分）——二叉树，最小公共祖先（lca）

    The lowest common ancestor (LCA) of two nodes U and V in a tree is the deepest node that has both U ...

  7. source 和sh 区别

    sh新建一个子shell进程,变量在主shell中无法获取 source在当前shell中执行脚本,变量在主shell即当前shell中可以获取 例子: 1.新建一个test.sh脚本,内容为:A=1 ...

  8. 小程序 获取微信小程序的源码

    1.微信小程序是以wxapkg可执行文件的形式存在本地的 2.网上有工具可以把wxapkg文件还原成源代码: https://github.com/qwerty472123/wxappUnpacker ...

  9. ubuntu　系统判断优盘的指定文件存在

    有很多的时候 会出现没有用的优盘路径 如果代码中写的是绝对路径 就有可能读不到优盘的内容 ,以下代码就是可以解决这样的问题 我已经封装成一个类 upanpath.h #ifndef UPANPATH_ ...

  10. 一、java三大特性--封装

    封装字面意思即包装.专业点来说就是数据隐藏,是指利用抽象数据将数据和基于数据的操作封装起来,使其构成一个不可分割的独立实体,数据被保护在抽象数据类型的内部,尽可能的隐藏细节,只保留一些对外的接口和外部 ...