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. Latex向上\向下取整语法 及卷积特征图高宽计算公式编辑

    向下\向上取整 在编辑卷积网络输出特征高宽公式时,需用到向下取整,Mark一下. 向下取整 \(\lfloor x \rfloor\) $\lfloor x \rfloor$ 向上取整 \(\lcei ...

  2. win10开启运行下显示历史操作记录

    步骤 设置,隐私,常规,允许windows跟踪应用启动,以改进开始和搜索结果  

  3. .net core 和 WPF 开发升讯威在线客服与营销系统：系统总体架构

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

  4. UICamera 编辑器与移动设备下的Find异常

    某次出包后,在移动设备下,发现所有的UIDrag和一些UIHUD组件都失效了,看了看Editor下是正常的,后面就做了一系列检查措施来排除问题所在. 1.看了下log日志里是否有相关报错异常,结果毫无 ...

  5. Azure Terraform（二）语法详解

    一,引言 上篇文章开始,我们简单介绍了以下通过基础设施管理工具----- Terraform,通过它来统一管理复杂的云基础设施资源.作为入门演示,使用Terraform 部署Azure 资源组的方式直 ...

  6. OAuth2.0的四种授权模式(转)

    1. OAuth2简易实战(一)-四种模式 1.1. 隐式授权模式(Implicit Grant) 第一步:用户访问页面时,重定向到认证服务器. 第二步:认证服务器给用户一个认证页面,等待用户授权. ...

  7. [数据库]000 - 🍳Sysbench 数据库压力测试工具

    000 - Sysbench 数据库压力测试工具 sysbench 是一个开源的.模块化的.跨平台的多线程性能测试工具,可以用来进行CPU.内存.磁盘I/O.线程.数据库的性能测试.目前支持的数据库有 ...

  8. C语言丨博客作业03

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/zswxy/SE2020-3/ 这个作业要求在哪里 https://edu.cnblogs.com/campus/z ...

  9. 使用sqoop将mysql数据导入到hive中

    首先准备工具环境:hadoop2.7+mysql5.7+sqoop1.4+hive3.1 准备一张数据库表: 接下来就可以操作了... 一.将MySQL数据导入到hdfs 首先我测试将zhaopin表 ...

  10. Java Object to Class

    User user = new User(username,password); //添加构成JWT的参数 JwtBuilder builder = Jwts.builder().setHeaderP ...