易网时代-编程资源站
Welcome
微信登录
编程资源
图片资源库
蚂蚁家优选
PDF转换器
软件资源
软件开发
、
小程序制作
、
系统集成与运维
、
空间租用
、
硬件开发
、
视频监控
、
技术咨询与支持
——联系电话:0311-88999002/88999003
首页
/
操作系统
/
Linux
/
JQuery表格内容过滤
使用JQuery 实现一个表格内容 过滤的功能, 共享代码如下:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<title>
JQuery表格内容过滤
</title>
<style
type
=
"text/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;}
</style>
<!-- 引入jQuery -->
<script
src
=
"jquery-1.5.2.min.js"
type
=
"text/javascript"
></script>
<script
type
=
"text/javascript"
>
$(function(){
$("#filterName").keyup(function(){
$("table tbody tr")
.hide()
.filter(":contains(""+( $(this).val() )+"")")
.show();
}).keyup();
})
</script>
</head>
<body>
<div>
<br/>
筛选:
<input
id
=
"filterName"
name
=
"filterName"
/>
<br/>
</div>
<table>
<thead>
<tr><th>
姓名
</th><th>
性别
</th><th>
暂住地
</th></tr>
</thead>
<tbody>
<tr><td>
SYJ
</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>
王六
</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>
Over!!!
收藏该网址
版权所有©石家庄振强科技有限公司2024
冀ICP备08103738号-5
网站地图