您的位置:知识库 » Web前端

15 Days of jQuery(Day 2)---很容易的制作双色表格

来源: jquery中文社区维基百科  发布时间: 2009-07-12 21:02  阅读: 1737 次  推荐: 0   原文链接   [收藏]  

这节本身没有太多的价值,重点在它提供的这个例子上。我将代码帖出来然后对重点部分注释一下:我们先来看看Thewatchmakerproject传统的做法:预览地址(你可以查看一下源代码)。再来看看jQuery是如何用5行代码来搞定的:

 

<!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=gb2312" />
<title>StripingTable</title>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<script type="text/javascript">
$(document).ready(
function(){ //这个就是传说的ready
$(".stripe tr").mouseover(function(){
//如果鼠标移到class为stripe的表格的tr上时,执行函数
$(this).addClass("over");}).mouseout(function(){
//给这行添加class值为over,并且当鼠标一出该行时执行函数
$(this).removeClass("over");}) //移除该行的class
$(".stripe tr:even").addClass("alt");
//给class为stripe的表格的偶数行添加class值为alt
});
</script>
<style type="text/css">
th
{
background
:#0066FF;
color
:#FFFFFF;
line-height
:20px;
height
:30px;
}

td
{
padding
:6px 11px;
border-bottom
:1px solid #95bce2;
vertical-align
:top;
text-align
:center;
}

td *
{
padding
:6px 11px;
}

tr.alt td
{
background
:#ecf6fc; /*这行将给所有的tr加上背景色*/
}

tr.over td
{
background
:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
}

</style>
</head>

<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
</tbody>
</table>
<p>PS: 飘飘说我的table没有<thead>,我知错了</p>
</body>
</html>

这里有一个jQuery的技巧不得不提一下:jQuery的链式操作,什么是链式操作呢? 我们来看看,本来应该写成这样子的:

 

 

$(".stripe tr").mouseover(function(){  
$(
this).addClass("over");})
$(
".stripe tr").mouseout(function(){
$(
this).removeClass("over"); })

但是我们写成了:

 

 

$(".stripe tr").mouseover(function(){  
$(
this).addClass("over");}).mouseout(function(){
$(
this).removeClass("over");})

在jQuery中,执行完mouseover或者mouseout等方法之后,都会返回当前的对象,所以可以进行链式操作

0
0

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻