Using the HTML component. HTC solves the problem of mouse passing and clicking style of the gridview

Using the HTML component. HTC solves the problem of mouse passing and clicking style of the gridview

1. HTC File

<Public: component>
<Attach event = "onmouseover" handler = "Mouseover"/>
<Attach event = "onmouseout" handler = "mouseout"/>
<Attach event = "onclick" handler = "mouseclick"/>

<SCRIPT type = "text/JavaScript">

Function Mouseover (){
If (this. tagname. tolowercase () = "TR "&&
This. rowindex> 0 &&
This. innerhtml. tolowercase (). indexof ('</Th>') <0 ){
Oldstyle = This. classname;
This. classname = "rowover ";
}
}

Function mouseout (){
If (this. tagname. tolowercase () = "TR "&&
This. rowindex> 0 &&
This. innerhtml. tolowercase (). indexof ('</Th>') <0 ){
This. classname = oldstyle;
}
}

Function mouseclick (){
If (this. tagname. tolowercase () = "TR "&&
This. rowindex> 0 &&
This. innerhtml. tolowercase (). indexof ('</Th>') <0 ){
If (selectedrow & selectedrow. rowindex = This. rowindex ){
Return;
}
If (selectedrow & prevstyle ){
Selectedrow. classname = prevstyle;
}
Prevstyle = oldstyle;
Selectedrow = this;
This. classname = "rowselected ";
Oldstyle = This. classname;
}
}
</SCRIPT>
</Public: component>

 

2. Reference in CSS styles

. List table
{
Background-color: # ffffff;
Color: #000000;
Width: 100%;
}
. List tr
{
Behavior: URL (../CSS/list. HTC );
}
. List th
{
Height: 22px;
Border-Right: solid 1px # c1c1c1;
Border-bottom: solid 1px # c1c1c1;
Background: URL (../img/thbg.jpg );
Padding-top: 3px;
}
. List TD
{
Height: 20px;
Border-Right: solid 1px # c1c1c1;
Border-bottom: solid 1px # c1c1c1;
Padding-left: 2px;
Vertical-align: middle;
Text-align: left;
Padding-top: 3px;
}
. List
{
Color: #000033;
}

. Rowover
{
Background: # d7fcd5;
}
. Rowover TD
{
Color: #08a200;
}
. Rowselected
{
Background: # c8ebf3;
}
. Row1
{
Background: # ffffff;
}
. Row2
{
Background: # f7faf7;
}

 

3. Set the css of the gridview

Cssclass = "list" rowstyle-cssclass = "row1" alternatingrowstyle-cssclass = "row2"
Selectedrowstyle-cssclass = "rowselected"