您的位置：首页 > Web前端 > JQuery

jQuery实现表格颜色的交替显示

2013-09-18 11:42 731 查看

很多时候为了清楚显示行数据，便于阅读，一般多是采用隔行颜色交替显示。

当然实现的方式也有很多，如果对于网站已经加载了jQuery（现在很多网站程序多是加载了jQuery的）可以很容易实现。

那么就来说说jQuery实现表格的隔行换行颜色的交替显示，效果图如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://test.myxzy.com/jquery/jquery-1.7.1.js" type="text/javascript"></script>
<title>jQuery实现表格颜色的交替显示 - 星知苑</title>
<script type="text/javascript">
$(document).ready(function(){
$(".color tbody tr:odd").addClass("color1");
$(".color tbody tr:even").addClass("color2");
$(".color tbody tr")
.mouseover(function(){$(this).addClass("color3");})
.mouseout(function(){$(this).removeClass("color3");});
});
</script>
<style type="text/css">
.color {border:1px solid #333;text-align:center;}
.color th {background-color:#333; color:#FFF;}
.color1 {background-color:#DDD; color:#333;}
.color2 {background-color:#fff; color:#333;}
.color3 {background-color:#666; color:#FFF;}
</style>
</head>
<body>
<Div align="center"><h1>jQuery实现表格颜色的交替显示 - <a href="http://www.myxzy.com">星知苑</a></h1></Div>
<Div align="center">
<table width="450" class="color">
<thead>
<tr>
<th>博客名称</th>
<th>作者</th>
<th>网址</th>
</tr>
</thead>
<tbody>
<tr>
<td>星知苑</td>
<td>星之宇</td>
<td>www.myxzy.com</td>
</tr>
<tr>
<td>星知苑</td>
<td>星之宇</td>
<td>www.myxzy.com</td>
</tr>
<tr>
<td>星知苑</td>
<td>星之宇</td>
<td>www.myxzy.com</td>
</tr>
<tr>
<td>星知苑</td>
<td>星之宇</td>
<td>www.myxzy.com</td>
</tr>
</tbody>
</table></div>
</body>
</html>

演示地址：http://test.myxzy.com/tablecolor/index.html

原码地址：http://pan.baidu.com/share/link?shareid=1834190756&uk=3271852832

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航