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

实现：

只需要一个内容过滤即可

  1. <body>
  2. 　　<input type="text" id="searchbox"/>
  3. 　　<table>
  4. 　　　　<tbody>
  5. 　　　　　　<tr>
  6. 　　　　　　　　<td>aaa</td>
  7. 　　　　　　　　<td>bbb</td>
  8. 　　　　　　</tr>
  9. 　　　　　　<tr>
  10. 　　　　　　　　<td>bbb</td>
  11. 　　　　　　　　<td>ccc</td>
  12. 　　　　　　</tr>
  13. 　　　　</tbody>
  14. 　　</table>
  15. 　　<script>
  16. 　　　　$(function(){
  17. 　　　　　　$('#searchbox').keyup(function(){
  18. 　　　　　　　　$("table tbody tr").hide()
  19. 　　　　　　　　.filter(":contains("+($(this).val())+")").show();//filter和contains共同来实现这个功能
  20. 　　　　　　})
  21. 　　　　})
  22. 　　</script>
  23. </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. [tensorflow]异或门的实现

    一段小程序:待理解 import tensorflow as tf import numpy as np #输入训练数据,这里是python的list, 也可以定义为numpy的ndarray x_d ...

  2. 使用ServerSocket建立聊天服务器（二）

    -------------siwuxie095                         工程名:TestMyServerSocket 包名:com.siwuxie095.socket 类名:M ...

  3. SpringBoot10 整合JSP

    1 整合JSP 1.1 导入相关依赖 JSP依赖.JSTL依赖 <?xml version="1.0" encoding="UTF-8"?> < ...

  4. SDUT 3399 数据结构实验之排序二：交换排序

    数据结构实验之排序二:交换排序 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 冒泡排序和快 ...

  5. appium自动化安装（一）

    1.首先去  https://github.com/  了解一下appium一些相关信息 2.安装node.js:node.js官方网站:https://nodejs.org/ 安装完成,打开Wind ...

  6. SpringMVC 配置式开发-HandlerMapping的执行流程（八）

    具体看这两块是怎么执行的 下图是实现了DispatcherServlet从HandleMapping获得处理器执行链的逻辑的源代码 下面是DispatcherServlet从HandleAdaptor ...

  7. Mac下配置MAMP Pro+PHPStorm

    一.配置MAMP Pro Hosts 下载地址:http://xclient.info/s/mamp-pro.html 在Hosts页签下,如图所示位置选择你工程目录 二.配置PHPStorm 1.点 ...

  8. Dev Envirenment - VS Code && C++ && MinGW

    1. 安装编译器 安装 MinGW-W64 添加系统环境变量 注意: 1)安装 MinGW 的时候要选择正确的 CPU 处理器类型 2)添加系统变量后需要重启电脑系统 2. 安装本文编辑器 安装 VS ...

  9. Net.Core导入EXCel文件里的数据

    1.前台的表单: <form enctype="multipart/form-data" method="post" id="inportFil ...

  10. 使用metasploit进行栈溢出攻击-4

    有了漏洞我们就可以进行攻击了.首先我们需要了解metasploit的exploit模块,具体可以看 http://www.offensive-security.com/metasploit-unlea ...