JavaScript实现GridView行背景色交替、鼠标悬停及点击选中效果

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BackgroundColor.aspx.cs" Inherits="_BackgroundColor" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>BackgroundColor</title>

</head>

<body>

<form id="form1" runat="server">

<asp:GridView runat="server" ID="gvMeiMingZi"></asp:GridView>

</form>

<script type="text/javascript">

//将事件绑定放在onload中，因为不确定JS直接写入此处是否会等待页面加载完成

//使用<%=%>输出GridView的ID，是因为在某些情况下（如使用MasterPage）HTML中的ID可能会发生变化

//颜色值推荐使用Hex格式，例如 #f00 或 #ff0000

window.onload = function(){

GridViewColor("<%=gvMeiMingZi.ClientID%>","#fff","#eee","#6df","#fd6");

        }

//参数依次为（若后两个参数指定为空值，则不会触发相应事件）：

//GridView ID, 正常行背景色, 交替行背景色, 鼠标悬停行背景色, 鼠标点击后背景色

function GridViewColor(GridViewId, NormalColor, AlterColor, HoverColor, SelectColor){

//获取所有需要控制的表格行

var AllRows = document.getElementById(GridViewId).getElementsByTagName("tr");

//设置每一行的背景色和事件，循环从1开始而非0，以避开表头行

for(var i=1; i<AllRows.length; i++){

//设定本行默认的背景色

AllRows[i].style.background = i%2==0?NormalColor:AlterColor;

//如果指定了鼠标悬停背景色，则添加onmouseover/onmouseout事件

//处于选中状态的行在发生这两个事件时不改变颜色

if(HoverColor != ""){

AllRows[i].onmouseover = function(){if(!this.selected)this.style.background = HoverColor;}

if(i%2 == 0){

AllRows[i].onmouseout = function(){if(!this.selected)this.style.background = NormalColor;}

                    }

else{

AllRows[i].onmouseout = function(){if(!this.selected)this.style.background = AlterColor;}

                    }
                }

//如果指定了鼠标点击背景色，则添加onclick事件

//在事件响应中修改被点击行的选中状态

if(SelectColor != ""){

AllRows[i].onclick = function(){

this.style.background = this.style.background==SelectColor?HoverColor:SelectColor;

this.selected = !this.selected;

                    }
                }
            }
        }

</script>

</body>

</html>

 

using System;

using System.Data;

public partial class _BackgroundColor:System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

    {

//生成DataTable并添加10个列

DataTable dt = new DataTable();

for(int i = 0; i < 10; i++)

        {

dt.Columns.Add();

        }

//往DataTable里添加20行数据

for(int i = 0; i < 20; i++)

        {

dt.Rows.Add(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);

        }

//将DataTable绑定到GridView

gvMeiMingZi.DataSource = dt;

gvMeiMingZi.DataBind();

    }
}