DataGrid click color change, and the mouse changes color part of the code

Source: Internet
Author: User
Add to the front-end HTML page


<Script language = "JavaScript">
<! --
VaR bcolor = '# ff3300'; // defines the color, which is the color displayed when you click
VaR fcolor = '# fafafa'; // defines the color of the font displayed when you click it.
Function tdover (TD)
{
If (TD. style. backgroundcolor! = Bcolor) // when the background color of this column is not the color defined above
{
TD. setattribute ('dtbg', TD. style. backgroundcolor); // obtain the background color of this column and set it to dtbg.
TD. setattribute ('dtco', TD. style. Color); // obtain the font color of this column and set it to dtco.

TD. style. Color = '# ff66cc'; // you can specify the font color of the column when you move the cursor up to # ff99ff.
TD. style. cursor = 'hand'; // set the Mouse shape to the hand shape
TD. style. backgroundcolor = '#66cc66'; // set the background color of this column to #66cc66
}
}
Function tdout (TD)
{
If (TD. style. backgroundcolor! = Bcolor) // when the background color of this column is not the color defined above
{
TD. style. backgroundcolor = TD. getattribute ('dtbg'); // set the background color of the column to the color obtained above, that is, dtbg.
TD. style. Color = TD. getattribute ('dtco'); // set the background color of the column to the color obtained above, that is, dtco
}
}
Function cleartdcolor (TDC)
{
VaR tdcoll = Document. All. Tags ('tr'); // obtain all rows
BC = TDC. getattribute ('dtbg'); // obtain the background color of the column (in the tdover method, setattribute)
Cc = TDC. getattribute ('dtco'); // obtain the font color of the column (in the tdover method, setattribute)
For (I = 0; I <tdcoll. length; I ++) // loop row
{
Whichtd = tdcoll (I); // obtain the current row
If (whichtd. style. backgroundcolor = bcolor) // if the cell is set to the start color, that is, bcolor
{
// Note: If your DataGrid does not distinguish between common and alternate columns, use the following Code , Clear color

/* Whichtd. style. backgroundcolor = BC; // set the color of the cell to the color obtained.
Whichtd. style. Color = cc; // set the font color of the cell to the expected color.
Whichtd. style. fontweight = '';
Break ;*/

// If your DataGrid is divided into common columns and alternate columns with colors, use the following code to clear the color:
// Tip: pay attention to the following judgment when using it. The modulo judgment may need to be exchanged based on your actual situation.
If (I % 2! = 0) // indicates a normal column. Because there is no color, the following color is ""
{
Whichtd. style. backgroundcolor = "";
Whichtd. style. color = "";
Whichtd. style. fontweight = '';
Break;
}
Else // indicates an alternate column. The following backgroundcolor is set based on the color of the alternate column in your DataGrid.
{
Whichtd. style. backgroundcolor = ""; // # ccffff is the color of the Set DataGrid alternate item (you can modify it as needed)
Whichtd. style. color = "";
Whichtd. style. fontweight = '';
Break;
}
}
}
}
Function tdcolor (TDC)
{
Cleartdcolor (TDC); // first clear all colors
BC = TDC. getattribute ('dtbg'); // obtain the background color of the column (in the tdover method, setattribute)
Cc = TDC. getattribute ('dtco'); // obtain the font color of the column (in the tdover method, setattribute)
TDCS = TDC. style. backgroundcolor; // obtain the current color of the column (that is, the color when the mouse moves to the cell)
If (event. srcelement. tagname! = 'A') // event. srcelement. tagname is the name of the triggered cell, that is, TD
{
If (TDCS! = Bcolor) // if the current color of the column is not equal to the color defined at the beginning
{
TDC. style. backgroundcolor = bcolor; // you can specify the background color as the starting color.
TDC. style. Color = fcolor; // set the background color to the starting font color.
TDC. style. fontweight = '2013 ';
}
Else
{
TDC. style. backgroundcolor = BC; // set the background color (to setattribute in the tdover method)
TDC. style. Color = cc; // set the background color to (setattribute in the tdover method)
TDC. style. fontweight = '';
}
}
}
Function tdcolordbl (TDC) // clear the color of the column
{
Cleartdcolor (TDC );
}
-->
</SCRIPT>

Add it to the itemdatabound event of the DataGrid

If (E. Item. itemtype! = Listitemtype. header)
{
E. Item. Attributes. Add ("onmouseover", "tdover (this )");
E. Item. Attributes. Add ("onmouseout", "tdout (this )");
E. Item. Attributes. Add ("onclick", "tdcolor (this )");
E. Item. Attributes. Add ("ondblclick", "tdcolordbl (this )");
}

 

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.