ASP.NET使用Repeater做Table交替行变色、鼠标经过变色及单击变色效果
本文教程是ASP.NET开发使用Repeater控件绑定数据列表，数据列表要做出的效果如Table交替行颜色、鼠标经过颜色、单击颜色,效果如下：
要实现这个效果很简单，都是入门级的吧。下面看下是如何实现的？
前台.ASPX内容如下
HTML Code [http://www.xueit.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">
子组数据
</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 style="width: 80%">
</div>
</div>
</ContentTemplate>
</div>
<script type="text/javascript" language="javascript">
window.onload =SetTableColor("Tab");
</script>
</asp:Content>
下面是JS关键代码：
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;
}
做好以上代码后，之后在.ASPX页面内容的<body>上加如下语句：
<script type="text/javascript"language="javascript">
window.onload =SetTableColor("Tab");</script>
这样就可以了。
