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. CSS的各种重要属性

    CSS属性图 01文字属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. idea 中在src/main/java中的xml扫描不到问题

    <build> <!-- start idea 默认 不加载 java下的配置文件 --> <resources> <resource> <dir ...

  3. Oracel 修改字段类型（有数据的情况）

    1 /*修改原字段名bh为bh_tmp*/ 2 alter table Tab_Name rename column bh to bh_tmp; 3 /*增加一个和原字段名同名的字段bh*/ 4 al ...

  4. Mac电脑远程连接SSH Host key verification failed 解决办法

    苹果电脑远程连接SSH出现如下问题: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@                     ...

  5. 对象存储Backblaze B2作为ShareX图床的Windows及安卓端配置

    标题: 对象存储Backblaze B2作为ShareX图床的Windows及安卓端配置 作者: 梦幻之心星 sky-seeker@qq.com 标签: [对象存储,图床,Backblaze,Shar ...

  6. web版文件管理系统 ——文件图标的获取

    需求来源:公司需要一个文件的管理系统,方便管理公司文档以及互相传阅以及一些权限控制的便利,其中极小的一块功能点就是现实文件列表里面的图标获取,从网上找图标太麻烦,而且不现实,不可能用户每次上传文件等你 ...

  7. ESXi 中重新启动管理代理

    使用直接控制台用户界面 (DCUI)重启管理代理: 连接到您的 ESXi 主机的控制台. 按 F2 自定义系统. 以 root 身份登录. 使用上下箭头导航至故障排除选项>重新启动管理代理. 按 ...

  8. 学习DOS,个人笔记

    在win中\表示根目录,  在linux中/表示根目录         注意: 有些家庭版的系统会选择性的调用命令的,有的命令虽然有那个文件,但是不能使用.....     dir 命令   英语全称 ...

  9. 初探JAVA内部类细节一

    定义: 可以将一个类的定义放在另一个类的内部 这就是内部类.--摘自java编程思想 一般实现方式: public class SimpleInnerClass { class Content { p ...

  10. reactor模式前序（二）：NIO WEB服务器设计

    前文介绍了传统IO的WEB经典服务器 reactor模式前序:传统IO的WEB服务器设计 下面看看JAVA NIO的WEB服务器设计 NIO是基于事件驱动的,对于NIO来说,重要组件是Selector ...