用JQuery實現表格隔行換顏色
最近在學習Jquery，其實很多論壇中都有一個特點就是每張貼都是隔行換顏色的，相信這點大家可能發現。那麼怎樣實現這種功能呢。方法有3種：
方法一：使用CSS樣式，定義兩個類的樣式，分別使用到表格中。這種方法想法簡單，相信很多人都想到。但是這樣做很麻煩，如果表格很多工作量就很大。這種方法也是侷限在靜態新增。如果要用到動態新增資料，相信大家就可以想像到。。。。
方法二：使用javascript，就是用javascript做個方法判斷表格是奇數行還是偶數行。這種實現也不難，但是如果對javascrip不熟悉就不一定做得出來。
方法三：就是使用jquery，對jquery不熟悉，可以到百度或者google中搜索，但是對網站開發人員來說肯定知道。那麼怎麼實現呢？只要我們做一個js檔案，程式碼如下：
$(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"> <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>
效果看圖：
