jquery表单内容过滤
2024-08-27 07:43:31
效果：
输入筛选字段后显示效果：
<!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;}
最新文章
- 【WCF】自定义地址头的筛选器
- Java网络编程(客户端和服务端原理)
- apache、mod_jk负载均衡与tomcat集群
- winform下调用webservice，传参List<string>
- 如何用PowerPoint制作闪烁的星星
- isKindOfClass,isMemberOfClass使用备忘
- 11G内存设置一例
- MySQL对sum()字段 进行条件筛选，使用having，不能用where
- How Tomcat Works 读书笔记 八 载入器 上
- SVG矢量图学习实例
- 记录一次MyEclipse打开jsp文件出现Error的解决办法
- Apace、Ngnix、Tomcat三者关系
- zabbix分布式监控部署--技术流ken
- IDEA或Webstorm设置Ctrl+滚轮调整字体大小
- 安装Vue和创建一个Vue脚手架项目
- 用optional取代null
- 关于Python的集合set
- 在ubuntu bionic下对基于qemu的arm64进行linux内核5.0.1版本的编译和运行
- Python 小知识点（10）--异常结构记录
- POJ 1985.Cow Marathon-树的直径-树的直径模板(BFS、DFS(vector存图)、DFS(前向星存图))