最近在学习Jquery，其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的，相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种：
方法一：使用CSS样式，定义两个类的样式，分别使用到表格中。这种方法想法简单，相信很多人都想到。但是这样做很麻烦，如果表格很多工作量就很大。这种方法也是局限在静态添加。如果要用到动态添加数据，相信大家就可以想像到。。。。
方法二：使用javascript，就是用javascript做个方法判断表格是奇数行还是偶数行。这种实现也不难，但是如果对javascrip不熟悉就不一定做得出来。
<style>
td{
background:expression((this.parentNode.rowIndex)%2==0?"#3DB7CC":"#B3F4FF");
}
</style>方法三：就是使用jquery，对jquery不熟悉，可以到百度或者google中搜索，但是对网站开发人员来说肯定知道。那么怎么实现呢？只要我们做一个js文件，代码如下：
自己用的，最后一行没有颜色
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
<!-- $("tr").attr("bgColor", "#d0d0d0");-->
$("tr").css("background-color", "#FFFFFF"); //为双数行表格设置背颜色素
$("tr:odd").css("background-color", "#d0d0d0"); //为双数行表格设置背颜色素
$("tr:last").css("background-color", "#FFFFFF"); //最后一行不设置颜色
}
);
</script>-----------------------------------------------------------
$(document).ready(function(){
$("table").attr("bgColor", "#222222");//设置表格的背景颜色
$("tr").attr("bgColor", "#3366CC");//为单数行表格设置背景颜色
$("tr:even").css("background-color", "#CC0000");//为双数行表格设置背颜色素
$("table").css("width","300px");//为表格添加样式，设置表格长度为300像素
});
然后在前台调用，就是在<head></head>中添加如下代码：<script type="text/javascript" src="js/InterleaveTable.js"></script>
src这句是所编写的js文件的路径。
最后就是这张表格的标记如下：
<table>
<tr><td>11111</td></tr>
<tr><td>22222</td></tr>
<tr><td>33333</td></tr>
<tr><td>44444</td></tr>
<tr><td>55555</td></tr>
<tr><td>55555</td></tr>
</table>
这个方法是经过验证过的，能够成功实现。方法很简单吧。
代码如下
[html] view plain copy print ?
1. <%@ Page Language="C#"AutoEventWireup="true"CodeBehind="WebForm4.aspx.cs"Inherits="jquerytest.WebForm4" %>
2.
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.
5. <htmlxmlns="http://www.w3.org/1999/xhtml">
6. <headrunat="server">
7. <title></title>
8. <scriptsrc="jquery-1.4.1-vsdoc.js"type="text/javascript"></script>
9. <scripttype="text/jscript">
10. $(document).ready(function() {
11. $("table").attr("bgColor", "#222222"); //设置表格的背景颜色
12. $("tr").attr("bgColor", "#3366CC"); //为单数行表格设置背景颜色
13. $("tr:even").css("background-color", "#CC0000"); //为双数行表格设置背颜色素
14. $("table").css("width", "300px"); //为表格添加样式，设置表格长度为300像素
15. });
16.
17. </script>
18. </head>
19. <body>
20. <formid="form1"runat="server">
21. <div>
22. <table>
23. <tr><td>11111</td></tr>
24. <tr><td>22222</td></tr>
25. <tr><td>33333</td></tr>
26. <tr><td>44444</td></tr>
27. <tr><td>55555</td></tr>
28. <tr><td>55555</td></tr>
29. </table>
30.
31. </div>
32. </form>
33. </body>
34. </html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="jquerytest.WebForm4" %>
<!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 runat="server">
<title></title>
<script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/jscript">
$(document).ready(function() {
$("table").attr("bgColor", "#222222"); //设置表格的背景颜色
$("tr").attr("bgColor", "#3366CC"); //为单数行表格设置背景颜色
$("tr:even").css("background-color", "#CC0000"); //为双数行表格设置背颜色素
$("table").css("width", "300px"); //为表格添加样式，设置表格长度为300像素
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr><td>11111</td></tr>
<tr><td>22222</td></tr>
<tr><td>33333</td></tr>
<tr><td>44444</td></tr>
<tr><td>55555</td></tr>
<tr><td>55555</td></tr>
</table>
</div>
</form>
</body>
</html>效果看图：
