Table交替行變色 滑鼠經過變色 單擊變色

最近做項目用到Repeater,沒有好的樣式隻能套一個Table來設定交替行顔色、滑鼠經過顔色、單擊顔色，網上艘了一下資料整理了一下，具體的效果如下，

　　前台的Html代碼如下：

　　 代碼

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> <% @ Page Title = "" Language = " C# " MasterPageFile = " ~/SystemBase/MainMasterPage.master "

AutoEventWireup = " true " CodeFile = " Spreater.aspx.cs " Inherits = " Spreater " %>

< asp:Content ID = " Content1 " ContentPlaceHolderID = " ContentPlaceHolder1 " runat = " Server " >

< script src = " App_Js/JSCommon.js " type = " text/javascript " >

</ script >

< div style = " width: 800px " >

< ContentTemplate >

< asp:Repeater ID = " Rep " runat = " server " >

< HeaderTemplate >

< table id = " Tab " class = " Rep_tab " >

< tr >

< th style = " width: 120px " > 組編号 </ th >

< th style = " width: 120px " > 組名稱 </ th >

< th style = " width: 100px " > 組上級編号 </ th >

< th style = " width: 120px " > 序号 </ th >

< th style = " width: 80px " > 層次 </ th >

< th style = " width: 160px " > 子組資料 </ th >

< th style = " width: 160px " > 标志 </ th >

</ tr >

</ HeaderTemplate >

< ItemTemplate >

< tr >

< td ><% #DataBinder.Eval(Container.DataItem, " GroupID " ) %></ td >

< td ><% #DataBinder.Eval(Container.DataItem, " G_CName " ) %></ td >

< td ><% #DataBinder.Eval(Container.DataItem, " G_ParentID " ) %></ td >

< td ><% #DataBinder.Eval(Container.DataItem, " G_ShowOrder " ) %></ td >

< td ><% #DataBinder.Eval(Container.DataItem, " G_Level " ) %></ td >

< td ><% #DataBinder.Eval(Container.DataItem, " G_ChildCount " ) %></ td >

< td > <% #DataBinder.Eval(Container.DataItem, " G_Delete " ) %></ td >

</ tr >

</ ItemTemplate >

< FooterTemplate >

</ table >

</ FooterTemplate >

</ asp:Repeater >

</ div >

</ div >

</ ContentTemplate >

</ div >

< script type = " text/javascript " language = " javascript " >

window.onload = SetTableColor( " Tab " );

</ script >

</ asp:Content >

　　JavaScript代碼如下：

　　 代碼

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> function SetTableColor(TableID) {

var clickClass = "" ; // 點選樣式名

var moveClass = "" ; // 滑鼠經過樣式名

var clickTR = null ; // 點選的行

var moveTR = null ; // 滑鼠經過行

var Ptr = document.getElementById(TableID).getElementsByTagName( " tr " );

for (i = 1 ; i < Ptr.length + 1 ; i ++ ) {

Ptr[i - 1 ].className = (i % 2 > 0 ) ? " Rep_Tab_EvenTr " : " Rep_Tab_OddTr " ;

}

// 設定滑鼠的動作事件

for ( var i = 1 ; i < Ptr.length; i ++ ) {

var Owner = Ptr[i].item;

// 滑鼠經過事件

Ptr[i].onmouseover = function Move() {

if (clickTR != this ) {

if (moveTR != this ) {

moveClass = this .className;

moveTR = this ;

this .className = " Rep_Tr_Move " ;

}

}

}

// 滑鼠離開事件

Ptr[i].onmouseout = function Out() {

if (clickTR != this ) {

moveTR = null ;

this .className = moveClass;

}

}

// 滑鼠單擊事件

Ptr[i].onclick = function Ck() {

if (clickTR != this ) {

if (clickTR) {

clickTR.className = clickClass;

}

clickTR = this ;

clickClass = moveClass;

}

this .className = " Rep_Tr_Click " ;

}

}

}

　　CSS樣式代碼如下：

　　 代碼

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->

.Rep_tab

{

width : 100% ;

margin : 0px auto ;

font : Georgia 11px ;

font-size : 12px ;

font-family : Tahoma, Arial, Helvetica, Sans-serif, "宋體" ;

color : #333333 ;

text-align : center ;

vertical-align : middle ;

border-collapse : collapse ;

}

.Rep_tab td

{

border : 1px solid #4d9ab0 ;

height : 25px ;

}

.Rep_tab caption

{

text-align : center ;

font-size : 12px ;

font-weight : bold ;

margin : 0 auto ;

}

.Rep_Tab_OddTr

{

background-color : #f8fbfc ;

color : #000000 ;

height : 25px ;

}

.Rep_Tab_EvenTr

{

background-color : #e5f1f4 ;

color : #000000 ;

height : 25px ;

}

.Rep_Tab_HeaderTr

{

background-color : #ffffee ;

color : #000000 ;

}

.Rep_Tr_Move

{

background-color : #ecfbd4 ;

color : #000000 ;

height : 25px ;

}

.Rep_Tr_Click

{

background-color : #bce774 ;

color : #333333 ;

height : 25px ;

}

　　注意：

　　在界面内添加JS和CSS的引用，記得是在你的Table的後面，添加如下代碼：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 　　< script type = " text/javascript " language = " javascript " >

　　window.onload = SetTableColor( " Tab " );

　　< / script>