简介摘要： 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>