<%@ Page Language="C#" EnableViewState="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected System.Data.DataTable CreateMengxianhuiDataSource()
{
System.Data.DataTable dt = new System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add(new System.Data.DataColumn("id", typeof(System.Int32)));
dt.Columns.Add(new System.Data.DataColumn("Name", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("Count", typeof(System.Double)));
dt.Columns.Add(new System.Data.DataColumn("CreateDate", typeof(System.DateTime)));
System.Random rd = new System.Random();
for (int i = 0; i < 10; i++)
{
dr = dt.NewRow();
dr[0] = i + i;
dr[1] = "【孟子E章】" + i.ToString();
dr[2] = System.Math.Ceiling(rd.NextDouble() * 1000);
dr[3] = DateTime.Now.AddDays(rd.Next(100) - rd.Next(100));
dt.Rows.Add(dr);
}
return dt;
}
//测试颜色数据
String[] testColor = { "#FFB90F", "#DDA0DD", "#B5B5B5", "#90EE90", "#5D478B", "#2E8B57" };
Random rd = new Random();
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("style", "background-color:" + testColor[rd.Next(testColor.Length - 1)]);
}
}
protected void Page_Load(object sender, EventArgs e)
{
GridView1.DataSource = GridView2.DataSource = this.CreateMengxianhuiDataSource();
GridView1.DataBind();
GridView2.DataBind();
GridView1.Attributes.Add("onmouseover", "SetColor1(this,event)");
GridView1.Attributes.Add("onmouseout", "RecoverColor1(event)");
}
protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "SetColor2(this)");
e.Row.Attributes.Add("onmouseout", "RecoverColor2(this)");
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>孟宪会之 GridView 鼠标行改变颜色的测试</title>
<script type="text/javascript">
var lastRow = null;
function SetColor1(t,evt) {
var obj = window.event ? event.srcElement : evt.target;
if (obj.tagName && (obj.tagName == "TABLE" || obj.tagName == "THEAD" || obj.tagName == "TBODY" || obj.tagName == "TFOOTER")) {
return;
}
if (obj.tagName != "TR") {
obj = obj.parentNode;
}
if (obj == t.rows[0]) return;
obj.setAttribute("oldColor", obj.style.backgroundColor);
obj.style.backgroundColor = "#FF0000";
lastRow = obj;
}
function RecoverColor1(evt) {
if (lastRow) {
lastRow.style.backgroundColor = lastRow.getAttribute("oldColor");
}
}
var lastClickNode = null;
function SetColor2(oTr) {
oTr.setAttribute("oldColor", oTr.style.backgroundColor);
oTr.style.backgroundColor = "#FF0000";
lastClickNode = oTr;
}
function RecoverColor2(oTr) {
if (lastClickNode) {
lastClickNode.style.backgroundColor = lastClickNode.getAttribute("oldColor");
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h2>实现方法一</h2>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound">
</asp:GridView>
<h2>实现方法二</h2>
<asp:GridView ID="GridView2" runat="server" OnRowDataBound="GridView2_RowDataBound">
<AlternatingRowStyle BackColor="#9BCD9B" />
<RowStyle BackColor="#EED2EE" />
</asp:GridView>
</form>
</body>
</html>