Wxxslt's blog
专注于SEO技术、网站建设、趣味数学题、日语学习，致力于成为人们学习的优秀博客平台。
« Previous Entries
Next Entries »
2009/10/04
jQuery表格筛选
运行后请再次刷新才有效果！
<!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>表格筛选</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('tbody > tr:odd').addClass('even'); $('tbody > tr:has(:checked)').addClass('check'); $('tbody > tr').hover(function(){ $(this).addClass('over'); },function(){ $(this).removeClass('over'); }).click(function(){ if($(this).hasClass('check')) $(this).removeClass('check').find(':checkbox').attr('checked',false); else $(this).addClass('check').find(':checkbox').attr('checked',true); }); $('.search').focus(function(){ $(this).addClass('highlight'); }).blur(function(){ $(this).removeClass('highlight'); }); //$('tbody tr td:contains("漳州市")').css({color:'red'}); $('.search').keyup(function(event){ var myEvent=event||window.event; if(myEvent.keyCode==13){ $('tbody tr').hide().filter(':contains('+$(this).val()+')').show(); } }); }); </script> <style type="text/css"> <!-- * { margin:0; padding:0; } body { font:13px Verdana, Arial, Helvetica, sans-serif; padding:100px; } caption { padding:5px; font:30px Georgia, "Times New Roman", Times, serif; color:#39c; } table { border-collapse:collapse; } th, td { border:1px solid #ccc; padding:4px; font:13px Verdana, Arial, Helvetica, sans-serif; } th { background:url(images/th-bg.gif) repeat-x; } col.name { width:250px; } .even { background:#E8F1FF; } .over, .check { color:#FFFFFF; cursor:pointer; background-color:#3366FF; } tbody tr:nth-child(odd) { } .search-box { padding-top:20px; } .search { border:1px solid #ccc; padding:2px; } .highlight { border:1px solid #fc0; background:#ff6; } --> </style> </head> <body> <table summary="DataTable"> <caption id="title"> 数据表格 </caption> <colgroup> <col class="id" /> <col class="name" /> <col class="tall" /> <col class="from" /> </colgroup> <thead> <tr> <th id="check"></th> <th id="id">I D</th> <th abbr="Name" id="name">名 字</th> <th id="tall">身 高</th> <th id="from">籍 贯</th> </tr> </thead> <tfoot> <tr> <td colspan="5">这是一个数据表！这是底部说明哦！</td> </tr> </tfoot> <tbody> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td headers="id">1</td> <td headers="name">我叫小明</td> <td headers="tall">我的身高是1.67米</td> <td headers="from">我来自中国福建省漳州市区</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td>2</td> <td>我叫小黄</td> <td>我的身高是1.70米</td> <td>我来自中国福建省厦门市区</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" checked="checked"/></td> <td>3</td> <td>我叫小张</td> <td>我的身高是1.73米</td> <td>我来自中国福建省泉州市区</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td>4</td> <td>我叫小刘</td> <td>我的身高是1.64米</td> <td>我来自中国福建省漳州市区</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td>5</td> <td>我叫小王</td> <td>我的身高是1.80米</td> <td>我来自中国福建省福州市区</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td>6</td> <td>我叫小狗</td> <td>我的身高是1.50米</td> <td>我来自美国亚历山大区</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td>7</td> <td>我叫小留</td> <td>我的身高是1.80米</td> <td>我来自火星铭哥省福州市区宽马路</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td>8</td> <td>我叫小沈阳</td> <td>我的身高是1.40米</td> <td>我来自中国福建省沈阳区，我是一只狗狗</td> </tr> </tbody> </table> <p class="search-box"> <input type="text" name="search" class="search" id="search" /> </p> </body> </html>
提示：您可以先修改部分代码再运行
Tags:
jquery
,
javascript
,
表格
« Previous Entries
Next Entries »
Navigation
首页
RSS
登入
注册
标签
留言
边栏
链接
归档
分类
SEO技术
[1]
网站建设
[59]
相关资料
[12]
Web标准
[7]
JS
[16]
C#.NET
[8]
PHP+MYSQL
[12]
C/C++
[4]
日语
[4]
趣味数学题
[4]
文学作品
[13]
杂七杂八
[10]
风云
[3]
纵观天下
[4]
心情日志
[96]
日历
<
2012
>
<
2
>
日
一
二
三
四
五
六
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
搜索
日志标题
日志全文
评论引用
所有留言
最新日志
关键词密度算法
阿基米德原理
九宫格延伸
苹果重量问题
Discuz!论坛经过C...
链接
自己链接
友情链接
Zend Studio
其他
登入
注册
申请链接
RSS：
日志
|
评论
编码：UTF-8
XHTML 1.0
Theme by Marshal. Powered by
Bo-Blog 2.1.1 Release
