jquery表单内容过滤
效果:
输入筛选字段后显示效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#filterName").keyup(function(){ //keyup:当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。http://jquery.cuishifeng.cn/keyup.html
$("table tbody tr")
.hide()
.filter(":contains('"+( $(this).val() )+"')")
// :contains(text):匹配包含给定文本的元素 http://jquery.cuishifeng.cn/contains.html // filter:筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式http://jquery.cuishifeng.cn/filter.html
.show();
}).keyup();
})
</script>
</head>
<body>
<div>
<br/>
筛选:
<input id="filterName" />
<br/> </div> <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>
</tbody>
</table> </body>
</html>
css
table { border:0;border-collapse:collapse;}
div{font:normal 12px/17px Arial;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}
jquery表单内容过滤的更多相关文章
- JQuery表单元素过滤选择器
此选择器主要是对所选择的表单元素进行过滤: 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素 ...
- jQuery 表单内容的获取
var formData = $('#myform').serialize()
- Jquery | 基础 | 使用 jQuery 表单过滤选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- python_way day17 jQuery表单验证,事件绑定,插件,文本框架,正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- jquery表单验证使用插件formValidator
JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- JQuery 表单验证--jquery validation
jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...
- jquery表单序列化
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json" ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
随机推荐
- 增加eclipse启动的Tomcat内存的
JAVA程序启动时JVM都会分配一个初始内存和最大内存给这个应用程序.这个初始内存和最大内存在一定程度都会影响程序的性能. 如何设置Tomcat的JVM内存大小 Tomcat本身不能直接在计算机上运行 ...
- github 开源项目
项目地址: https://github.com/Trinea/android-open-project
- 请教下 Yii 和 Ajax来验证用户名是否存在
添加一个 Custom, Model页面: CustomForm中: public function rules() { // 使用ajax 校验数据 return array( array('nam ...
- smtp邮件营销吧
SPF 设置说明: 首先你必须有自己的域名.没有的话是不可能设置 SPF 的. SPF 是域名的一条 TXT 记录. 如果你的邮箱服务器是企业邮箱服务商的,可以在自己的 SPF 中直接包含服务商 SP ...
- [转]Linux的tail 与head 命令
转自:http://blog.csdn.net/carolzhang8406/article/details/6112707 head命令是用来查看具体文件的前面几行的内容,具体格式如下: head ...
- 【C traps and pit falls】阅读笔记
已经是第几遍读C 陷阱与缺陷了,某种意义上,这不是一本常读常新的书,大概是因为读一遍过后就记住了. 一.编译器在将程序分解成符号的时候,使用的是大嘴法. 二.使用不对称边界有很多好处. 三.缓冲输出与 ...
- 远程连接mongodb出现 no route to host 和 Connection refused
部署好mongodb服务器后,在客户端安装好php的mongodb扩展,用程序连接mongodb服务器出错:no route to host.搜索了差不多一天的时候都没有相关的解决方法.最后在mong ...
- 轻松学习Linux之内核编译
欢迎大家给我投票: http://2010blog.51cto.com/350944 650) this.width=650;" onclick='window.open("h ...
- 一个采用python获取股票数据的开源库,相当全,及一些量化投资策略库
tushare: http://tushare.waditu.com/index.html 为什么是Python? 就跟javascript在web领域无可撼动的地位一样,Python也已经在金融量化 ...
- REST四种请求(get,delete,put,post) 收集整理 之一
转自:http://blog.csdn.net/cloudcraft/article/details/10087033 资源是REST中最关键的抽象概念,它们是能够被远程访问的应用程序对象.一个资源就 ...