Table交替行变色 鼠标经过变色 单击变色
2010-10-14 14:45
369 查看
最近做项目用到Repeater,没有好的样式只能套一个Table来设置交替行颜色、鼠标经过颜色、单击颜色,网上艘了一下资料整理了一下,具体的效果如下,
前台的Html代码如下:
代码
JavaScript代码如下:
代码
CSS样式代码如下:
代码
注意:
在界面内添加JS和CSS的引用,记得是在你的Table的后面,添加如下代码:
前台的Html代码如下:
代码
<%@ 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代码如下:
代码
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样式代码如下:
代码
/*-----------------Repeater 控件内部Table样式定义-----------------*/ /* Repeater内部Table的样式 */ .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; /*细线表格代码*/ } /* Repeater内部Table的td样式 */ .Rep_tab td { border:1px solid #4d9ab0; /*细线表格线条颜色*/ 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; } /*鼠标经过的颜色*/ .Rep_Tr_Move { background-color: #ecfbd4; color: #000000; height: 25px; } /* 鼠标点击的颜色*/ .Rep_Tr_Click { background-color: #bce774; color: #333333; height: 25px; }
注意:
在界面内添加JS和CSS的引用,记得是在你的Table的后面,添加如下代码:
<script type="text/javascript" language="javascript"> window.onload = SetTableColor("Tab"); </script>
相关文章推荐
- DataGrid 单击变色,鼠标经过变色 部分代码
- ASP.NET使用Repeater做Table交替行变色、鼠标经过变色及单击变色效果
- Table交替行变色 鼠标经过变色 单击变色
- DataGrid 单击变色,鼠标经过变色 部分代码 (转)
- DataGrid 单击变色,鼠标经过变色 部分代码
- Jquery实现GridView隔行变色,鼠标经过变色,单击或者选中变色
- DataGrid 单击变色,鼠标经过变色 部分代码
- GridView 鼠标经过时变色两种方法
- jQuery表格隔行变色,鼠标经过变色
- js实现隔行变色操作鼠标经过效果
- js实现鼠标经过表格行变色的方法
- gridview 鼠标经过变色函数
- DataGrid行随鼠标移动变色及单击双击行事件处理
- 鼠标经过背景变色
- 鼠标经过tr背景变色的js代码
- jsp制作复合表头并循环产生表格内容,控制隔行变色、鼠标经过改变背景色等操作
- 超简单表格隔行换色+鼠标经过变色2
- gridview鼠标经过某行改变样式、颜色并且单击弹出窗口
- 鼠标经过 表格行变色的源代码
- jquery 写得不错的table鼠标经过变色