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

kia126

浏览: 104323 次
性别:
来自: 北京

最近访客更多访客>>

xiaozhunliu

paladin1988

lrlfriend

hua2142452

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jquery JavaScript Ajax

转载自网络
这节本身没有太多的价值，重点在它提供的这个例子上。我将代码帖出来然后对重点部分注释一下：我们先来看看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>
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等方法之后，都会返回当前的对象，所以可以进行链式操作。

分享到：

jQuery入门教程-15 Days of jQuery(Day 3)- ... | jQuery入门教程-15 Days of jQuery(Day 1)- ...

2013-03-12 22:03
浏览 818
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

jQuery入门教程-15 Days of jQuery(Day 15) --- 拖拽效果和选择器

jQuery入门教程-15 Days of jQuery(Day 14) --- Javascript 工具提示

jQuery入门教程-15 Days of jQuery(Day 13) --- jQuery 表格

jQuery入门教程-15 Days of jQuery(Day 12) --- jQuery Lightbox （插件）

jQuery入门教程-15 Days of jQuery(Day 11) --- 使用不苛刻的javascript代码实现多文件上传

jQuery入门教程-15 Days of jQuery(Day 10) --- 使用jQuery Javascript 库实现“即点即改”的AJAX化

jQuery入门教程-15 Days of jQuery(Day 9) --- 快速和略显粗劣的AJAX视频教程

jQuery入门教程-15 Days of jQuery(Day 8) --- 使用Javascript（jQuery）实现圆角边框

jQuery入门教程-15 Days of jQuery(Day 6) --- 更安全的Contact Forms，不带CAPTCHA

jQuery入门教程-15 Days of jQuery(Day 7) --- 样式表切换

jQuery入门教程-15 Days of jQuery(Day 5)--懒人用Jquery生成的HTML

jQuery入门教程-15 Days of jQuery(Day 4)---安全邮件列表

jQuery入门教程-15 Days of jQuery(Day 3)-巧妙的伪装链接

jQuery入门教程-15 Days of jQuery(Day 1)-比window.onload更快一些的载入

jQuery入门教程-15 Days of jQuery(Day 0)-JQuery - What, Why, When, Where, Who

jQuery.validate的optional方法

jQuery之ajax请求总结

最近访客更多访客>>