从最基础的东西开始学习.
在网页中,当遇到数据表格中,经常需要一些隔行换色和鼠标移过时行高亮的效果.
下面是一个简单实现.
<html>
<head>
<title>Demo</title>
<script type="text/JavaScript" src="jquery.js"></script>
<style type='text/css'>
tr.highlight {background-color: #EFEDDE;}
tr.odd {background-color: #EEEEEE;}
tr.even {background-color: #DDDDDD;}
</style>
<script language='javascript' type='text/javascript'>
$("document").ready(function() {
$("tr").each(function(i) {
var className = ["odd", "even"][i % 2];
$(this).addClass(className);
$(this).hover(
function() {
$(this).removeClass(className);
$(this).addClass("highlight");
},
function() {
$(this).removeClass("hightlight");
$(this).addClass(className);
}
)
});
});
</script>
</head>
<body>
<table>
<tr><td>Nick Name</td><td>GreatGhoul</td></tr>
<tr><td>Phone</td><td>13028473721</td></tr>
<tr><td>Email</td><td>greatghoul@gmail.com</td></tr>
<tr><td>QQ</td><td>348189477</td></tr>
<tr><td>Blog</td><td>http://greatghoul.blogspot.com</td></tr>
</body>
</html>如果只需要隔行换色效果,可使用以下代码.
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");已经喜欢上jQuery了.
转载声明: 出自: Ghoul To World!作者: GreatGhoul
Posts
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.