CheckBox改变GridView行的颜色(1)

Highlighting GridView rows using onmouseover, onclick and using checkbox are all similar features. All are pretty simple to implement. The main problem rises when using the same technique on a GridView with alternate rows with different color. Let's check out how this can be done. 

First, here is the HTML code for the GridView control. 

< asp:GridView  ID ="gvCategories"  runat ="server"  AutoGenerateColumns ="False"  BackColor ="LightGoldenrodYellow"  BorderColor ="Tan"  BorderWidth ="1px"  CellPadding ="2"  ForeColor ="Black"  GridLines ="None" >

 

< Columns >

 

< asp:TemplateField >

< ItemTemplate >

< asp:CheckBox  ID ="chkSelect"  runat ="server"  onclick ="changeColor(this)"   />

</ ItemTemplate >

</ asp:TemplateField >

 

< asp:TemplateField  HeaderText ="Name" >

< ItemTemplate >

< asp:Label  ID ="lblCategoryName"  runat ="server"  Text ='<%#  Eval("CategoryName") % > ' />

</ ItemTemplate >

</ asp:TemplateField >

 

< asp:TemplateField  HeaderText ="Description" >

< ItemTemplate >

< asp:Label  ID ="lblDescription"  runat ="server"  Text ='<%#  Eval("Description") % > ' />

</ ItemTemplate >

</ asp:TemplateField >

 

</ Columns >

< FooterStyle  BackColor ="Tan"   />

< PagerStyle  BackColor ="PaleGoldenrod"  ForeColor ="DarkSlateBlue"  HorizontalAlign ="Center"   />

< SelectedRowStyle  BackColor ="DarkSlateBlue"  ForeColor ="GhostWhite"   />

< HeaderStyle  BackColor ="Tan"  Font-Bold ="True"   />

< AlternatingRowStyle  BackColor ="PaleGoldenrod"   />

 

</ asp:GridView >  

The ChangeColor function is fired whenever a checkbox is clicked. 

One important point to note about Alternate rows is that there is no color assigned to them. They get the color from the style property of the table. In other words we only assign the style to the even numbered rows. 

< script  language ="javascript"  type ="text/javascript" > ...

var color = ''; 

function changeColor(obj) 

...{ 

var rowObject = getParentRow(obj); 

 

var parentTable = document.getElementById("gvCategories"); 

 

if(color == '') 

...{

color = getRowColor(); 

} 

 

if(obj.checked) 

...{ 

rowObject.style.backgroundColor = 'Yellow'; 

}

else 

...{

 

rowObject.style.backgroundColor = color; 

color = ''; 

}

 

// private method

function getRowColor() 

...{

if(rowObject.style.backgroundColor == '') return parentTable.style.backgroundColor; 

else return rowObject.style.backgroundColor; 

}

 

}

// This method returns the parent row of the object

function getParentRow(obj) 

...{ 

do 

...{

obj = obj.parentElement; 

}

while(obj.tagName != "TR") 

 

return obj; 

}

 

</ script >