Below isCodeAnnotations should be relatively detailed and suitable for beginners. You can directly copy the code of the following two files to your project for execution. The following files can also be downloaded and run. The code is tested in IE7, IE8, firefox2, and firefox3. If you have any questions, please leave a message below, I will try to reply in a timely manner.
Backgroundcolor. aspx
It mainly contains a gridview, which is the key object we are tossing, and a bunch of JavaScript, which is the means we are tossing the gridview.
<! 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">
// Put the event in onload, because I don't know if JS will be executed after loading the page if it is written directly here.
// Use the <% = %> method to output the ID of the gridview because, in some cases (for example, masterpage), the ID changes in HTML.
// Hex is recommended for color values, for example, # f00 or # ff0000.
Window. onload = function (){
Gridviewcolor ("<% = gvmeimingzi. clientid %>", "# fff", "# Eee", "# 6df", "# fd6 ");
}
// The parameters are in sequence (if the last two values are null, no corresponding event will occur ):
// Gridview ID, the background color of the normal row, the background color of the alternate row, the background color of the mouse pointing to the row, and the background color after the mouse clicking
Function gridviewcolor (gridviewid, normalcolor, altercolor, hovercolor, selectcolor ){
// Obtain all rows to be controlled
VaR allrows = Document. getelementbyid (gridviewid). getelementsbytagname ("TR ");
// Set the background color and events of each row. The cycle starts from 1 rather than 0, and the row in the header can be avoided.
For (VAR I = 1; I <allrows. length; I ++ ){
// Set the Default background color of the row
Allrows [I]. style. Background = I % 2 = 0? Normalcolor: altercolor;
// If the background color pointed to by the mouse is specified, the onmouseover/onmouseout event is added.
// The selected row does not change the color when these two 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 the background color of the mouse click is specified, the onclick event is added.
// Modify the selected status 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>
</Html>
Backgroundcolor. aspx. CS
It is used to generate a pile of data for testing. Otherwise there will be nothing in the front of the gridview, and it will not be able to see the effect.
Public partial class _ backgroundcolor: system. Web. UI. Page
{
Protected void page_load (Object sender, eventargs E)
{
// Generate a able and add 10 columns
Datatable dt = new datatable ();
For (INT I = 0; I <10; I ++)
{
DT. Columns. Add ();
}
// Add 20 rows of data to the able
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 ();
}
}
Sample package download http://xiazai.jb51.net/yuanma/asp.net/GridView_Javascript.rar
Sample file: Click here to download the sample file
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
