js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色

　　/// <summary>

　　/// 数据行绑定事件

　　/// </summary>

　　/// <param name="sender"></param>

　　/// <param name="e"></param>

　　protected void gvProduct_RowDataBound(object sender, GridViewRowEventArgs e)

　　{

　　try

　　{

　　if (e.Row.RowType == DataControlRowType.DataRow )

　　{

　　GridViewRow row = e.Row;

　　CheckBox ckb = row.Cells[0].FindControl("ckb") as CheckBox;

　　Label ProductID = row.Cells[0].FindControl("lblProductID") as Label;

　　//当鼠标停留时更改背景色

　　row.Attributes.Add("onmouseover", "this.style.backgroundColor='#00A9FF'");

　　//当鼠标移开时还原背景色

　　row.Attributes.Add("onmouseout", "gvProducts_onmouseout('" + gvProducts.ClientID + "','" + ckb.ClientID + "',this) ");

　　//当鼠标移开时还原背景色

　　row.Attributes.Add("onclick", "SelectRadio('" + gvProducts.ClientID + "','" + ckb.ClientID + "','" + ProductID.Text + "',this) ");

　　ckb.Attributes.Add("onclick", "SelectRadio('" + gvProducts.ClientID + "','" + ckb.ClientID + "','" + ProductID.Text + "',document.getElementById('" + row.ClientID + "')) ");

　　}

　　catch (Exception ex)

　　{

　　}

　　}

　　/****************************************************/

　　//功能：鼠标移出时设置行颜色

　　//说明：onmouseout事件时使用

　　//作者：XXXXX

　　//日期：2010年5月26日

　　/****************************************************/

　　function gvUsers_onmouseout(listId, SelectRadioID, row) {

　　var SelectRadio = document.getElementById(SelectRadioID);

　　//找到控制范围

　　var GridViewtableSearchList = document.getElementById(listId);

　　//找到控制范围下所有input

　　var objs = GridViewtableSearchList.getElementsByTagName("input");

　　//找到控制范围下所有checkbox并都变为false

　　for (var i = 0; i < objs.length; i++) {

　　if (objs[i].type.toLowerCase() == "checkbox" && objs[i] == SelectRadio) {

　　if (SelectRadio.checked) {

　　//设置选中行的颜色

　　row.style.backgroundColor = '#33A922'

　　}

　　else {

　　//设置交替行的颜色

　　if (i % 2 == 0) {

　　row.style.backgroundColor = '#FFFFFF'

　　}

　　else {

　　row.style.backgroundColor = '#F4FAFD'

　　}

　　}

　　}

　　}

　　}

　　/****************************************************/

　　//功能：鼠标单击时使用

　　//说明：onmouseout事件时使用

　　//作者：XXXXXX

　　//日期：2010年5月26日

　　/****************************************************/

　　function SelectRadio(listId, SelectRadioID, rv, row) {

　　var SelectRadio = document.getElementById(SelectRadioID);

　　//找到控制范围

　　var GridViewtableSearchList = document.getElementById(listId);

　　//找到控制范围下所有input

　　var objs = GridViewtableSearchList.getElementsByTagName("input");

　　//找到控制范围下所有checkbox并都变为false

　　for (var i = 0; i < objs.length; i++) {

　　//设置除当前选择行外其它行的背景色

　　if (objs[i].type.toLowerCase() == "checkbox" && objs[i] != SelectRadio) {

　　objs[i].checked = false;

　　//设置交替行的背景色

　　if (i % 2 == 0) {

　　objs[i].parentElement.parentElement.style.backgroundColor = '#FFFFFF'

　　}

　　else {

　　objs[i].parentElement.parentElement.style.backgroundColor = '#F4FAFD'

　　}

　　}

　　}

　　var SelectRadioSelectRadioID = SelectRadio.id;

　　SelectRadio.checked = !SelectRadio.checked

　　//设置当前选择行的背景色和返回选择行的主键

　　if (SelectRadio.checked) {

　　row.style.backgroundColor = '#33A922'

　　window.returnValue = rv;

　　}

　　else {

　　window.returnValue = ""

　　}

　　}