Use JavaScript CSS to implement the GridView line background color Alternately, the mouse across the line discoloration, click on the line Color selection _ Practical skills

Source: Internet
Author: User
Add mouse click to select (In fact, just click to change the color, "choice" is not appropriate here), the way to apply this directly to the GridView, if it is other controls, or direct HTML, a little modification can also be used, here only to provide a train of thought. Although the GridView uses AlternatingRowStyle to provide alternating row background color problems, but this thing with really bad, see it generated to the HTML table, it is called a mess.

Here is the code, the comments should be more detailed, more suitable for beginners, you can copy the following two files directly to your project directly executed. The bottom has the file download address, also can download directly after running, the code in the Ie7,ie8,firefox2,firefox3 test pass, have any questions, please leave a message below, I will try to reply in time.

Backgroundcolor.aspx
Including a GridView, is the focus of our toss, and a bunch of javascript, is our way to toss the 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 ">

<title>BackgroundColor</title>
<body>
<form id= "Form1" runat= "Server" >
<asp:gridview runat= "Server" id= "Gvmeimingzi" ></asp:GridView>
</form>
<script type= "Text/javascript" >
Put the incident in the onload, because I do not know if JS directly to write here will not wait until the page is loaded to perform
The ID of the GridView is output using the <%=%> method because in some cases (such as using masterpage) the ID in the HTML is changed
Color values are recommended for use with hex, such as #f00 or #ff0000
Window.onload = function () {
Gridviewcolor ("<%=gvMeiMingZi.ClientID%>", "#fff", "#eee", "#6df", "#fd6");
}

The arguments are in order (the latter two will not occur if you specify a null value):
GridView ID, normal row background color, alternating row background color, mouse pointer to row background color, mouse click Back view
function Gridviewcolor (Gridviewid, NormalColor, Altercolor, Hovercolor, Selectcolor) {
Get all the rows you want to control
var allrows = document.getElementById (Gridviewid). getElementsByTagName ("tr");

Sets the background color and events for each row, starting at 1 instead of 0, to avoid the header row
for (var i=1; i<allrows.length; i++) {
Set the default background color of the bank
Allrows[i].style.background = i%2==0? Normalcolor:altercolor;

If you specify a background color that the mouse points to, add the Onmouseover/onmouseout event
The selected row does not change color when both events occur
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;}
}
}

If you specify a background color for the mouse click, add the onclick event
Modify the selected state of the clicked Row in the event response
if (Selectcolor!= "") {
Allrows[i].onclick = function () {
This.style.background = This.style.background==selectcolor? Hovercolor:selectcolor;
this.selected =!this.selected;
}
}
}
}
</script>
</body>

BackgroundColor.aspx.cs
Used to generate a bunch of data for testing, otherwise there is nothing in the GridView in front of it.

Using System;
Using System.Data;

public partial class _backgroundcolor:system.web.ui.page
{
protected void Page_Load (object sender, EventArgs e)
{
Generate a DataTable and add 10 columns
DataTable dt = new DataTable ();
for (int i = 0; i < i++)
{
Dt. Columns.Add ();
}

Add 20 rows of data to the DataTable
for (int i = 0; i < i++)
{
Dt. Rows.Add (0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
}

Bind a DataTable to the GridView
Gvmeimingzi.datasource = DT;
Gvmeimingzi.databind ();
}
}
Sample package Download Http://xiazai.jb51.net/yuanma/asp.net/GridView_Javascript.rar

Sample files: Click here to download the sample files

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.