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

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

后台代码

代码

/****************************************************/
//功能：鼠标移出时设置行颜色
//说明：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 = ""
}
}

注:由于火狐不支持parentElement 属性 使用parentNode代替可以兼容火狐