jquery 数据查询

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(function() {

                $('#filterName').keyup(function() {

                    $('table tbody tr').hide().filter(":contains('" + ($(this).val()) + "')").show();

                }).keyup(); //DOM加载完时，绑定事件完成之后立即触发

            });

        </script>

        <style type="text/css">

            table {

                width: 50%;

                border: 1px solid;

                background-color: #8FBC8F;

            }

            thead tr th {

                text-align: left;

                border-bottom: 1px solid;

            }

        </style>

    </head>

    <body>

        筛选<input type="text" id="filterName" />

        <br><br>

        <table>

            <thead>

                <tr>

                    <th>姓名</th>

                    <th>性别</th>

                    <th>暂住地</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>张三</td>

                    <td>男</td>

                    <td>浙江宁波</td>

                </tr>

                <tr>

                    <td>李四</td>

                    <td>女</td>

                    <td>浙江杭州</td>

                </tr>

                <tr>

                    <td>王五</td>

                    <td>男</td>

                    <td>湖南长沙</td>

                </tr>

                <tr>

                    <td>赵六</td>

                    <td>男</td>

                    <td>浙江温州</td>

                </tr>

                <tr>

                    <td>Rain</td>

                    <td>男</td>

                    <td>浙江杭州</td>

                </tr>

                <tr>

                    <td>MAXMAN</td>

                    <td>女</td>

                    <td>浙江杭州</td>

                </tr>

                <tr>

                    <td>张八</td>

                    <td>男</td>

                    <td>浙江宁波</td>

                </tr>

                <tr>

                    <td>高合金钢</td>

                    <td>女</td>

                    <td>浙江杭州</td>

                </tr>

                <tr>

                    <td>王进</td>

                    <td>男</td>

                    <td>湖南长沙</td>

                </tr>

                <tr>

                    <td>东风风光</td>

                    <td>男</td>

                    <td>浙江温州</td>

                </tr>

                <tr>

                    <td>Rick</td>

                    <td>男</td>

                    <td>浙江杭州</td>

                </tr>

                <tr>

                    <td>Micle</td>

                    <td>女</td>

                    <td>浙江杭州</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

效果预览：

jquery 数据查询的更多相关文章

  1. Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数

    JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数                             ...

  2. Django models .all .values .values_list 几种数据查询结果的对比

    Django models .all .values .values_list 几种数据查询结果的对比

  3. jQuery数据缓存方案详解：$.data()的使用

    我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是j ...

  4. MVC实用架构设计（三）——EF-Code First（4）：数据查询

    前言 首先对大家表示抱歉,这个系列已经将近一个月没有更新了,相信大家等本篇更新都等得快失望了.实在没办法,由于本人水平有限,写篇博客基本上要大半天的时间,最近实在是抽不出这么长段的空闲时间来写.另外也 ...

  5. 关系数据库SQL之高级数据查询:去重复、组合查询、连接查询、虚拟表

    前言 接上一篇关系数据库SQL之基本数据查询:子查询.分组查询.模糊查询,主要是关系型数据库基本数据查询.包括子查询.分组查询.聚合函数查询.模糊查询,本文是介绍一下关系型数据库几种高级数据查询SQL ...

  6. SharePoint服务器端对象模型 之 使用CAML进展数据查询

    SharePoint服务器端对象模型 之 使用CAML进行数据查询 一.概述 在SharePoint的开发应用中,查询是非常常用的一种手段,根据某些筛选.排序条件,获得某个列表或者某一些列表中相应的列 ...

  7. .NET应用架构设计—面向查询服务的参数化查询设计（分解业务点，单独配置各自的数据查询契约）

    阅读目录: 1.背景介绍 2.对业务功能点进行逻辑划分(如:A.B.C分别三个业务点) 2.1.配置映射关系,对业务点配置查询契约(构造VS插件方便生成查询契约) 2.2.将配置好的映射策略文件放在调 ...

  8. Yii2 数据查询

    转载来自: http://www.yiichina.com/tutorial/95 数据查询 User::find()->all(); 此方法返回所有数据: User::findOne($id) ...

  9. 6、SQL Server 数据查询

    一.使用SELECT检索数据 数据查询是SQL语言的中心内容,SELECT 语句的作用是让数据库服务器根据客户要求检索出所需要的信息资料,并按照规定的格式进行整理,返回给客户端. SELECT 语句的 ...

随机推荐

  1. Python 函数对象的本质

    Python 函数对象本质上是 function 类的实例. 1 从示例说起 def factorial(n): '''return n!''' return 1 if n < 2 else n ...

  2. EF5中使用UnitOfWork

    前言 每次提交数据库都会打开一个连接,造成结果是:多个连接无法共用一个数据库级别的事务,也就无法保证数据的原子性.一致性. 解决办法是:在ObjectContext的CRUD操作基础上再包装一层,提供 ...

  3. [.NET] - EventLog.EntryWritten Event

    刚看到在MSND论坛上有人问一个EventLog.EntryWritten Event相关的问题,说是在2015触发了一个2013年的EventWritten的事件,比较好奇,然后查看了下这个类: h ...

  4. 【扫盲】i++和++i的区别

    从学java开始,我们就听说过i++和++i的效果一样,都能使i的值累加1,效果如同i=i+1: 但是使用过程中,有和不同呢,今天我们来说说看. 案例一: int i=0; int j=i++; Sy ...

  5. 安利一个基于Spring Cloud 的面试刷题系统。面试、毕设、项目经验一网打尽

    推荐: 接近100K star 的Java学习/面试指南 Github 95k+点赞的Java面试/学习手册.pdf 今天给小伙伴们推荐一个朋友开源的面试刷题系统. 这篇文章我会从系统架构设计层面详解 ...

  6. [leetcode]692. Top K Frequent Words频率最高的前K个单词

    这个题的排序是用的PriorityQueue实现自动排列,优先队列用的是堆排序,堆排序请看:http://www.cnblogs.com/stAr-1/p/7569706.html 自定义了优先队列的 ...

  7. 2. C++中的引用

    1.  引用的基本使用 作用:给变量起别名 语法:数据类型  &别名=原名 注意: 别名数据类型与原名数据类型一致. 引用必须初始化. 引用一旦初始化后,就不可以更改(只能作为一个变量的别名) ...

  8. java13编程基础之数组深入

    大纲一维数组概述数组是相同类型数据的有序集合.数组描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成.其中,每一个数据称作一个元素,每个元素可以通过一个索引(下标)来访问它们. 这些按序排列 ...

  9. 杭电OJ2039——三角形（c++）（易错题：数据类型不确定）

    三角形 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  10. Java反编译反混淆神器 - CFR

    最近有大量jar包需要反编译后使用,但是由于jar包中的类被混淆过了,直接反编译以后的里面所有的变量都是一个名字.所以这里介绍一个反混淆神器:CRF. 不知道是不是官网的链接:http://www.b ...