Jquery实现表格隔行换色悬停换色

Jquery在Web前端技术中有着广泛的应用。Jquery是一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。他比JS要简单的多,很多函数调用很方便,今天举一个小例子来展示一下Jquery的魅力吧:)

Jquery实现表格隔行换色悬停换色

表格行间隔行用不同颜色表示, 便于信息浏览. 同时具有鼠标经过行高亮效果.

效果展示:

Name Age MSN Email
Tony 111 tony@live.com SEM SHARE
Tony 111 tony@live.com SEM SHARE
Tony 111 tony@live.com SEM SHARE
Tony 111 tony@live.com SEM SHARE
Tony 111 tony@live.com SEM SHARE
Tony 111 tony@live.com SEM SHARE

JS代码

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".stripe_tb tr").mouseover(function(){
//如果鼠标移到class为stripe_tb的表格的tr上时,执行函数
$(this).addClass("over");}).mouseout(function(){
//给这行添加class值为over,并且当鼠标一出该行时执行函数
$(this).removeClass("over");}) //移除该行的class
$(".stripe_tb tr:even").addClass("alt");
//给class为stripe_tb的表格的偶数行添加class值为alt
});
</script>

CSS代码

<style type="text/css">
/*注意选择器的层叠关系*/
.stripe_tb th { background:#B5CBE6; color:#003399; line-height:20px; height:30px; }
.stripe_tb td { padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center; }
.stripe_tb td * { padding:6px 11px; }
.stripe_tb tr.alt td { background:#ecf6fc; /*这行将给所有偶数行加上背景色*/
}
.stripe_tb tr.over td { background:#FEF3D1; /*这个将是鼠标高亮行的背景色*/ }
</style>

HTML代码

  <table class="stripe_tb" width="111%" border="0" 
cellspacing="0" cellpadding="0 "> <!--用class="stripe_tb"来标识需要使用该效果的表格--> <thead> <tr> <th>Name</th> <th>Age</th> <th>MSN</th>
<th>Email</th> </tr> </thead>

<tbody> <tr> <td>Tony</td> <td>111</td> <td>tony@live.com</td> <td><a href="http://www.semshare.net/">SEM SHARE</a></td> </tr> <tr> <td>Tony</td> <td>111</td> <td>tony@live.com</td> <td><a href="http://www.semshare.net/">SEM SHARE</a></td> </tr> <tr> <td>Tony</td> <td>111</td> <td>tony@live.com</td> <td><a href="http://www.semshare.net/">SEM SHARE</a></td> </tr> <tr> <td>Tony</td> <td>111</td> <td>tony@live.com</td> <td><a href="http://www.semshare.net/">SEM SHARE</a></td> </tr> <tr> <td>Tony</td> <td>111</td> <td>tony@live.com</td> <td><a href="http://www.semshare.net/">SEM SHARE</a></td> </tr> <tr> <td>Tony</td> <td>111</td> <td>tony@live.com</td> <td><a href="http://www.semshare.net/">SEM SHARE</a></td> </tr> </tbody> </table>


3 Replies to “Jquery实现表格隔行换色悬停换色

发表评论