简介摘要： Table交替行变色 鼠标经过变色 单击变色 最近做项目用到Repeater,没有好的样式只能套一个Table来设置交替行颜色、鼠标经过颜色、单击颜色，网上艘了一下资料整理了一下，具体的效果如下，
Table交替行变色 鼠标[shu biao]经过变色 单击[dan ji]变色
最近做项目[xiang mu]用到Repeater,没有好的样式只能套一个Table来设置[she zhi]交替行颜色、鼠标[shu biao]经过颜色、单击[dan ji]颜色，网上艘了一下资料整理了一下，具体的效果如下，
前台[qian tai]的Html代码[dai ma]如下：
代码[dai
ma]
Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> <% @ 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 " > 子组数据[shu ju] </ 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代码[dai ma]如下：
代码[dai
ma]
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> function SetTableColor(TableID) {
var clickClass = "" ; // 点击样式名
var moveClass = "" ; // 鼠标[shu biao]经过样式名
var clickTR = null ; // 点击的行
var moveTR = null ; // 鼠标[shu biao]经过行
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 " ;
}
// 设置[she zhi]鼠标[shu biao]的动作事件[shi jian]
for ( var i = 1 ; i < Ptr.length; i ++ ) {
var Owner = Ptr[i].item;
// 鼠标[shu biao]经过事件[shi jian]
Ptr[i].onmouseover = function Move() {
if (clickTR != this ) {
if (moveTR != this ) {
moveClass = this .className;
moveTR = this ;
this .className = " Rep_Tr_Move " ;
}
}
}
// 鼠标[shu biao]离开事件[shi jian]
Ptr[i].onmouseout = function Out() {
if (clickTR != this ) {
moveTR = null ;
this .className = moveClass;
}
}
// 鼠标[shu biao]单击[dan ji]事件[shi jian]
Ptr[i].onclick = function Ck() {
if (clickTR != this ) {
if (clickTR) {
clickTR.className = clickClass;
}
clickTR = this ;
clickClass = moveClass;
}
this .className = " Rep_Tr_Click " ;
}
}
}
CSS样式代码[dai ma]如下：
代码[dai
ma]
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->
/* -----------------Repeater 控件内部Table样式定义----------------- */
/* Repeater内部Table的样式 */
.Rep_tab
{
width : 100% ;
margin : 0px auto ;
font : Georgia 11px ;
font-size : 12px ;
font-family : Tahoma, Arial, Helvetica, Sans-serif, "宋体[song ti]" ;
color : #333333 ;
text-align : center ;
vertical-align : middle ;
border-collapse : collapse ; /* 细线表[xian biao]格代码[dai ma] */
}
/* Repeater内部Table的td样式 */
.Rep_tab td
{
border : 1px solid #4d9ab0 ; /* 细线表[xian biao]格线条颜色 */
height : 25px ;
}
/* Repeater内部Table的caption样式 */
.Rep_tab caption
{
text-align : center ;
font-size : 12px ;
font-weight : bold ;
margin : 0 auto ;
}
/* Repeater内部Table的TR的奇数行样式 */
.Rep_Tab_OddTr
{
background-color : #f8fbfc ;
color : #000000 ;
height : 25px ;
}
/* Repeater内部Table的TR的偶数行样式 */
.Rep_Tab_EvenTr
{
background-color : #e5f1f4 ;
color : #000000 ;
height : 25px ;
}
.Rep_Tab_HeaderTr
{
background-color : #ffffee ;
color : #000000 ;
}
/* 鼠标[shu biao]经过的颜色 */
.Rep_Tr_Move
{
background-color : #ecfbd4 ;
color : #000000 ;
height : 25px ;
}
/* 鼠标[shu biao]点击的颜色 */
.Rep_Tr_Click
{
background-color : #bce774 ;
color : #333333 ;
height : 25px ;
}
注意：
在界面[jie mian]内添加JS和CSS的引用[yin yong]，记得是在你的Table的后面，添加如下代码[dai ma]：
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> < script type = " text/javascript " language = " javascript " >
window.onload = SetTableColor( " Tab " );
< / script>