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. Core3.0返回的数据格式xml或json

    前言 此方法从百度得,原文链接找不到了 步骤 //WebAPI接口返回xml格式,由Accept.application决定 services.AddMvc(opt => { opt.Respe ...

  2. 记一次Ajax请求MVC调优

    问题描述 ASP.NETMVC项目,编辑页面赋值操作,ajax请求很慢. 对同一个控制器有2个请求 一个为获取该表的树形结构数据(绑定下拉框) 一个为获取某实体的单条记录(编辑操作) 排查过程 数据库 ...

  3. Javaweb前台界面代码复用总结

    servlet声明定义message信息传给前天界面判断输出message: if(booknamelist.size()==0) { message="根据书名查询没有结果!"; ...

  4. MVC和WebApi路由机制比较

    1.MVC使用的路由 在MVC中,默认路由机制是通过解析url路径来匹配Action.比如:/User/GetList,这个url就表示匹配User控制器下的GetList方法,这是MVC路由的默认解 ...

  5. Linux系统下qt程序运行找不到IGL

    linux下使用QT5运行时出现两个问题: cannot find -lGL collect2:error:ld returned 1 exit status 这是因为系统缺少链接库,执行两条命令即可 ...

  6. 认识PHP8

    PHP 团队于2020年11月26日宣布 PHP 8 正式发布!这意味着将不会有 PHP 7.5 版本.PHP8 目前正处于非常活跃的开发阶段,所以在接下来的几个月里,情况可能会发生很大的变化.我也分 ...

  7. TCP超时重传时间的选择

    一---导读 TCP超时重传时间的选择是计算机网络中较复杂的问题之一,但幸好前辈们都把路铺好了,我们只需要学习并且遵循这些规则,有能力的话去进一步改正. 二---必知的一些专业术语 A--RTT( r ...

  8. 使用docker制作Mysql镜像

     一.过程说明 通过Dockerfile创建mysql镜像,使用的mysql软件包为mariadb二进制分发版,最终在宿主机启动mysql容器从而能在mysql容器外部访问mysql服务. 宿主机IP ...

  9. uni-app 顶部tabbar切换

    完成样式 项目地址:https://gitee.com/jielov/uni-app-tabbar 顶部tabbar代码 <!--顶部导航栏--> <view class=" ...

  10. 【小菜学网络】MAC地址详解

    上一小节介绍了以太网帧的结构,以及帧中各个字段的作用.参与以太网通讯的实体,由以太网地址唯一标识.以太网地址也叫做 MAC 地址,我们对它仍知之甚少. 以太网地址在不同场景,称谓也不一样,常用叫法包括 ...