Using javascript / css implementation GridView alternate row background color. Click the line color

Jun 20 posted in AJAX (RSS), comments.

Using javascript / css implementation GridView alternate row background color, click the line color

Ask Bo a few days ago was found in someone clicks GridView question about the issue of line color, suddenly think of a long, long time ago, wrote an article in a simple but commonly used table style - mouse across the color line - simple implementation, is about Alternating table row color and change color when the mouse point, and just today put a complement and extend it about, together with the click of a mouse selection (in fact, just click a color change, "select" is inappropriate here), so as to put this on direct application to the GridView, if other controls, directly or HTML, a little modification can also be used here only to provide a train of thought. While the GridView to use the alternate line AlternatingRowStyle provide background color, but this thing really in a bad mood with, to watch it to generate HTML that table, called a chaos ah.

The following is a code, a more detailed note should be still more suitable for beginners, you can put the following two files to copy the code directly to your direct execution of projects. Bottom there is file download address, download directly after the operation, code in IE7 and Firefox2 test is passed, have any questions, please post below, I will try to reply promptly.

BackgroundColor.aspx
Main contains a GridView, is the focus of our torment, have a bunch of javascript, is to toss us a means of 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 runat="server">
<asp:GridView runat="server"> </ asp: GridView>
</ form>
<script type="text/javascript">
/ / Put on onload in case, because if I do not know JS wrote here directly, such as the page is finished loading before it is implemented / / using the GridView <%=%> output because the ID is some cases (such as using MasterPage) will cause changes in HTML in the ID / / recommend the use of color values of Hex, such as # ff0000 or # f00
window.onload = function () (
GridViewColor ("<%= gvMeiMingZi.ClientID %>","# fff "," # eee "," # 6df "," # fd6 ");
)

/ / Parameters followed (the latter two, if designated as a null value, then the case will not happen):
/ / GridView ID, the normal line background color, background color of alternate lines, mouse, point to line the background color, mouse, click the back view function GridViewColor (GridViewId, NormalColor, AlterColor, HoverColor, SelectColor) (
/ / Want to control access to all rows var AllRows = document.getElementById (GridViewId). GetElementsByTagName ( "tr");

/ / Set the background color of each line and the case, one cycle from the beginning rather than 0, you can avoid the first line in table for (var i = 1; i <AllRows.length; i + +) (
/ / Set the default background color of the Bank AllRows. Style.background = i% 2 == 0? NormalColor: AlterColor;

/ / If the specified mouse point to the background color, then add the onmouseover / onmouseout events / / status in selected lines of these two incidents happened not to change the color if (HoverColor! = "") (
AllRows. Onmouseover = function () (if (! This.selected) this.style.background = HoverColor;)
if (i% 2 == 0) (
AllRows. Onmouseout = function () (if (! This.selected) this.style.background = NormalColor;)
)
else (
AllRows. Onmouseout = function () (if (! This.selected) this.style.background = AlterColor;)
)
)

/ / If you specify a background color of the mouse click, then add the onclick event / / in the case have been modified in response to clicks in the selected line if (SelectColor! = "") (
AllRows. Onclick = function () (
this.style.background = this.style.background == SelectColor? HoverColor: SelectColor;
this.selected =! this.selected;
)
)
)
)
</ script>
</ body>
</ html>

BackgroundColor.aspx.cs
Used to generate a pile of data for testing, or in front of the GridView has No , it can not see the effect of the
using System;
using System.Data;

public partial class _BackgroundColor: System.Web.UI.Page
(
protected void Page_Load (object sender, EventArgs e)
(
/ / Generate DataTable and add 10 out DataTable dt = new DataTable ();
for (int i = 0; i <10; i + +)
(
dt.Columns.Add ();
)

/ / DataTable to add 20 lines of data for (int i = 0; i <20; i + +)
(
dt.Rows.Add (0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
)

/ / Bind the DataTable to the GridView
gvMeiMingZi.DataSource = dt;
gvMeiMingZi.DataBind ();
)
)