当在文本框中输入关键字，就会搜索出包含关键字的数据

实现：

只需要一个内容过滤即可

<body>

　　<input type="text" id="searchbox"/>

　　<table>

　　　　<tbody>

　　　　　　<tr>

　　　　　　　　<td>aaa</td>

　　　　　　　　<td>bbb</td>

　　　　　　</tr>

　　　　　　<tr>

　　　　　　　　<td>bbb</td>

　　　　　　　　<td>ccc</td>

　　　　　　</tr>

　　　　</tbody>

　　</table>

　　<script>

　　　　$(function(){

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

　　　　　　　　$("table tbody tr").hide()

　　　　　　　　.filter(":contains("+($(this).val())+")").show();//filter和contains共同来实现这个功能

　　　　　　})

　　　　})

　　</script>

</body>

input keyup的时候实现内容过滤的更多相关文章

  1. jQuery选择器之内容过滤选择器Demo

    测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  2. 黑马day16 jquery&amp;内容过滤选择器&amp;可见度选择器

    内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上 .:contains(text) 使用方法: $("div:contains('John')")    返回值  集 ...

  3. Python Django开发中XSS内容过滤问题的解决

    from:http://stackoverflow.com/questions/699468/python-html-sanitizer-scrubber-filter 通过下面这个代码就可以把内容过 ...

  4. Jquery过滤选择器，选择前几个元素，后几个元素，内容过滤选择器等

    一.基本过滤选择器(重点掌握下列八个):first 选取第一个元素 $("div:first").css("color","red");:l ...

  5. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  6. JQuery 内容过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 灵玖软件Nlpir Parser语义智能内容过滤

    Internet是全球信息共享的基础设施,是一种开放和面向 所有用户的技术.它一方面要保证信息方便.快捷的共享;另一方面要防止垃圾信息的传播.网络内容分析是一种管理信 息传播的重要手段.它是网络信息安 ...

  8. jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...

  9. (7)Jquery1.8.3快速入门_内容过滤选择器

    一.Jquery的内容过滤选择器: 内容过滤选择器: 1.:contains(text) 选取含有文本内容为text的元素 2. :empty 选取不包含子元素或者文本为空的元素 3.:has(sel ...

随机推荐

  1. Maven学习入门——2016-2-17

    一.Maven的基本概念 1.1Mawen是干啥的??? 我们第一次接触Maven一般就是用Maven为我们的项目加入jar包,非常的方便. maven到底是干什么的??说白了,maven就是用来管理 ...

  2. 第3章 ZooKeeper基本数据模型 3-1 zk数据模型介绍

    基本数据模型是zookeeper的重点. 它是参照Linux/Unix的目录结构. 子节点就相当于是父目录下的一个子目录,在zookeeper里面它是称之为节点,父节点和子节点,然后每一个节点就会有一 ...

  3. interface 接口 和多态的含义

    <?php //interface关键字用于定义接口 interface ICanEat{ //接口里面的方法不需要方法的实现 public function eat($food) ; } // ...

  4. ES6中的Set与Map数据结构

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一 ...

  5. gearman 并发的执行多个任务

    Examples: Multi-Query In this example we know that we need to fetch several result sets from a datab ...

  6. 24-Fibonacci(dfs+剪枝)

    http://acm.hdu.edu.cn/showproblem.php?pid=5167 Fibonacci Time Limit: 2000/1000 MS (Java/Others)    M ...

  7. php学习笔记-逻辑运算符

    $a and $b 只有当$a和$b都是true才返回true,否则false. $a or $b 只要$a或者$b至少有一个是true则返回true.意思是或者$a是true,或者是$b是true, ...

  8. 9.Delegate类

    Concepts      不像MVC模式,Model/View模式并没有单独用来处理事件和用户交互的组件(controller).通常,视图负责向用户呈现模型中的数据,并处理用户的输入.有时,为了让 ...

  9. notpad++ 开发php神奇

     开发PHP应具有的插件: 1. Compare: 可以用来比较两个文件不同之处. 2. Explorer:文件浏览器插件,包含收藏夹.Session保存功能.可与NppExec脚本结合使用. 3. ...

  10. Hive安装及配置

    第一步:下载hive并解压 tar zxvf hive-0.8.1-bin.tar.gz 重命名: mv hive-0.8.1-bin hive 给权限:chown hadoop:hadoop hiv ...