Repeater_Table_单击_Repeater样式,Table样式,交替变色,单击变色

使用Repeater和Table实现样式效果：交替变色与单击变色

最新推荐文章于 2016-01-08 15:19:00 发布

原创最新推荐文章于 2016-01-08 15:19:00 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#table #javascript #function #null #server #asp

这篇博客介绍了如何在ASP.NET项目中使用Repeater结合Table，通过JavaScript和CSS实现表格行的交替变色、鼠标经过变色以及单击变色效果。提供了前台HTML、JavaScript和CSS代码示例，并强调了添加引用的位置。

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