1、实现鼠标划过行跟着变色
2、当点击鼠标是此行变底色（如红色），当再次点击时刚才点击的那行愎复原来的色，新点击的这行变为红色。查看了很多资料实现第1种很容易，实现第2种时不太满意，因为每次点击时都会有一行变红色，多点几次整个Gridview都变为红的了，这种效果不好
2、当点击鼠标是此行变底色（如红色），当再次点击时刚才点击的那行愎复原来的色，新点击的这行变为红色。查看了很多资料实现第1种很容易，实现第2种时不太满意，因为每次点击时都会有一行变红色，多点几次整个Gridview都变为红的了，这种效果不好
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;namespace WebApp {
public partial class gridSample : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
DataTable dt = new DataTable();
dt.Columns.Add("A", typeof(string));
dt.Columns.Add("B", typeof(string));
dt.Columns.Add("C", typeof(string));
dt.Columns.Add("X", typeof(int));
dt.Columns.Add("Y", typeof(int));
dt.Columns.Add("Time", typeof(DateTime)); dt.Rows.Add(new object[] { "a", "b", "c", 1, 100, new DateTime(2010, 10, 11, 8, 0, 0, 0) });
dt.Rows.Add(new object[] { "a", "b", "c", 1, 150, new DateTime(2010, 10, 11, 8, 15, 0, 0) });
dt.Rows.Add(new object[] { "a", "b", "d", 1, 120, new DateTime(2010, 10, 11, 8, 20, 0, 0) });
dt.Rows.Add(new object[] { "a", "b", "c", 1, 200, new DateTime(2010, 10, 11, 8, 40, 0, 0) });
dt.Rows.Add(new object[] { "a", "b", "c", 1, 130, new DateTime(2010, 10, 11, 9, 5, 0, 0) }); //a |b| c|... | 1 |180|9:30|
dt.Rows.Add(new object[] { "a", "b", "c", 1, 180, new DateTime(2010, 10, 11, 9, 30, 0, 0) });
//添加辅助字段
dt.Columns.Add("T", typeof(string));
foreach (DataRow r in dt.Rows) {
r["T"] = DateTime.Parse(r["Time"].ToString()).ToString("yyMMddHH");
} DataTable dtClone = dt.Clone();
foreach (DataRow r in dt.Rows) {
DataRow[] rows = dtClone.Select(string.Format("A='{0}' and B='{1}' and C='{2}' and T='{3}'", r["A"], r["B"], r["C"], r["T"]));
if (rows.Length == 0) {
dtClone.ImportRow(r);
}
else {
int x = 0, y = 0; int.TryParse(rows[0]["X"].ToString(), out x);
int.TryParse(rows[0]["Y"].ToString(), out y);
x += int.Parse(r["X"].ToString());
y += int.Parse(r["Y"].ToString());
rows[0]["X"] = x;
rows[0]["Y"] = y;
}
}
GridView1.DataSource = dtClone;
GridView1.RowCreated += new GridViewRowEventHandler(GridView1_RowCreated);
this.DataBind();
} void GridView1_RowCreated(object sender, GridViewRowEventArgs e) {
e.Row.Attributes.Add("onmouseover", "trover(this)");
e.Row.Attributes.Add("onmouseout", "trout(this)");
e.Row.Attributes.Add("onclick", "changecolor(this)");
foreach (TableCell ctl in e.Row.Cells) {
ctl.Attributes.Add("onclick", "filldata(this)");
}
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="gridSample.aspx.cs" Inherits="WebApp.gridSample" %><!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 runat="server">
<title></title>
<style type="text/css">
.trover
{
background-color: Green;
}
.trout
{
background-color: White;
}
</style> <script type="text/javascript">
function trover(obj) {
if (obj.tagName == "TR") {
obj.className = "trover";
}
} function trout(obj) {
if (obj.tagName == "TR") {
obj.className = "trout";
}
} function filldata(obj) {
if (obj.tagName == "TD") {
document.getElementById("txt").value = obj.innerHTML;
}
} function changecolor(obj) {
if (obj.tagName == "TR") {
if (obj.style.backgroundColor == "black")
obj.style.backgroundColor = "white";
else
obj.style.backgroundColor = "black";
}
}
</script></head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
<input type="text" id="txt" />
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title> <script language="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; i++) //若不包含标题行
{
Ptr[i].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)
{
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";
}
}
}
</script> <style>
.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的th样式 */
.Rep_tab th
{
border: 1px solid #111; /*细线表格线条颜色*/
background-color: #e5f1f4;
color: #000000;
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;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Repeater ID="Rep" runat="server">
<HeaderTemplate>
<table id="Tab" class="Rep_tab">
<tr>
<th >
编号
</th>
<th >
其他
</th>
<th>
内容
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%#DataBinder.Eval(Container.DataItem, "id")%>
</td>
<td>
<%#DataBinder.Eval(Container.DataItem, "PkID")%>
</td>
<td>
<%#DataBinder.Eval(Container.DataItem, "Title")%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<div id="mydiv" style ="position:absolute; width :100px; height :100px; display :none; background-color :Red;">
<input type="text" id="mytxt"/>
</div>
</form> <script type="text/javascript" language="javascript">
window.onload = SetTableColor("Tab");
</script></body>
</html>