js implements GridView radio selection effect and automatically sets the background color of alternating rows, selected rows, and mouse movement rows_javascript skills

Backend code

Copy code The code is as follows:

/// < ;summary>
/// Data row binding event
///
///
/ //
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;
//Change the background color when the mouse stays
row.Attributes.Add("onmouseover", "this.style.backgroundColor='# 00A9FF'");
//Restore the background color when the mouse moves away
row.Attributes.Add("onmouseout", "gvProducts_onmouseout('" gvProducts.ClientID "','" ckb.ClientID "', this) ");
//Restore the background color when the mouse moves away
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)
{
}
}

Front-end code

Copy code The code is as follows:

/****************************************************/
//Function: Set row color when mouse moves out
//Description: Used when onmouseout event
//Author: XXXXX
//Date: May 26, 2010日
/****************************************************/
function gvUsers_onmouseout(listId, SelectRadioID, row) {
var SelectRadio = document.getElementById(SelectRadioID);
//Find the control scope
var GridViewtableSearchList = document.getElementById(listId);
//Find all inputs under the control scope
var objs = GridViewtableSearchList.getElementsByTagName("input");
//Find all checkboxes under the control scope and become false
for (var i = 0; i < objs.length; i ) {
if (objs[i].type.toLowerCase() == "checkbox" && objs[i] == SelectRadio) {
if (SelectRadio.checked) {
//Set the color of the selected row
row.style.backgroundColor = '#33A922'
}
else {
//Set the alternation Row color
if (i % 2 == 0) {
row.style.backgroundColor = '#FFFFFF'
}
else {
row.style.backgroundColor = '#F4FAFD '
}
}
}
}
}
/****************************************************/
//Function: Use when mouse clicks
//Instructions : Used when onmouseout event
//Author: XXXXXX
//Date: May 26, 2010
/****************************************************/
function SelectRadio(listId, SelectRadioID, rv, row ) {
var SelectRadio = document.getElementById(SelectRadioID);
//Find the control scope
var GridViewtableSearchList = document.getElementById(listId);
//Find all inputs under the control scope
var objs = GridViewtableSearchList.getElementsByTagName("input");
//Find all checkboxes under the control scope and change them to false
for (var i = 0; i < objs.length; i ) {
//Set the background color of other rows except the currently selected row
if (objs[i].type.toLowerCase() == "checkbox" && objs[i] != SelectRadio) {
objs[i ].checked = false;
//Set the background color of alternating rows
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
//Set the background color of the currently selected row and return the primary key of the selected row
if (SelectRadio.checked) {
row.style.backgroundColor = ' #33A922'
window.returnValue = rv;
}
else {
window.returnValue = ""
}
}