后台代码 复制代码 代码如下: /// <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 = "" } }

　　推荐阅读

　　让mayfish支持mysqli数据库驱动的实现方法

网上搜到的一些关于mysql与mysqli的区别： mysql 是非持继连接函数而 mysqli 是永远连接函数。也就是说 mysql 每次链接都会打开一个连接的进程而 mysqli 多次运行 mysqli 将使用同一连接进程,从而减少了服务器的开>>>详细阅读

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

地址：http://www.17bianji.com/kaifa2/JS/26331.html

 1/2    1