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>