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. Winform 去掉 最大化 最小化 关闭按钮（不是关闭按钮变灰）终极解决办法

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  2. python初学者-使用if条件语句判断成绩等级

    x = int(input("x=")) if x<0 or x > 100:#如果不在0--100区间内输出error print("error" ...

  3. 李宏毅机器学习课程笔记-2.5线性回归Python实战

    本文为作者学习李宏毅机器学习课程时参照样例完成homework1的记录. 任务描述(Task Description) 现在有某地空气质量的观测数据,请使用线性回归拟合数据,预测PM2.5. 数据集描 ...

  4. postgresql 创建分表

    划分指的是将逻辑上的一个大表分成一些小的物理上的片.划分有很多益处: 1.在某些情况下查询性能能够显著提升,特别是当那些访问压力大的行在一个分区或者少数几个分区时.划分可以取代索引的主导列.减小索引尺 ...

  5. Kafka 消费组消费者分配策略

    body { margin: 0 auto; font: 13px / 1 Helvetica, Arial, sans-serif; color: rgba(68, 68, 68, 1); padd ...

  6. 用漫画的形式展现——什么是web

    Web主要经历了web1.0和web2.0的阶段.万维网的初期都是web1.0的时代:静态页面. 在不同的时代,流行的web安全问题也不太相同.在web1.0时代,web安全主要是 Web1.0:sq ...

  7. python之scrapy框架基础搭建

    一.创建工程 #在命令行输入scrapy startproject xxx #创建项目 二.写item文件 #写需要爬取的字段名称 name = scrapy.Field() #例 三.进入spide ...

  8. B树与B+树区别辨析

    我们都知道,innodb中的索引结构使用的是B+树.B+树是一种B树的变形树,而B树又是来源于平衡二叉树.相较于平衡二叉树,B树更适合磁盘场景下文件索引系统.那为什么B树更适合磁盘场景,B+树又在B树 ...

  9. C++语言基础——01一切的开始

    环境准备 集成开发环境(Integrated Development Environment,IDE) 竞赛中最常见的是Dev-C++,平时练习采用其他IDE也可,使用方法都是类似的. 编译器 推荐使 ...

  10. Linux下的screen和作业任务管理

    一.screen 首先介绍下screen,screen是Linux下的一个任务容器,开启了之后就可以让任务在后台执行而不会被网络中断或者是终端退出而影响到. 在Linux中有一些耗时比较久的操作(例如 ...