最近在学习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>
这个方法是经过验证过的,能够成功实现。方法很简单吧。
代码如下
- <%@ 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">
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <headrunat="server">
- <title></title>
- <scriptsrc="jquery-1.4.1-vsdoc.js"type="text/javascript"></script>
- <scripttype="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>
- <formid="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>
<%@ 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>
效果看图: