Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 18:26:10
Original
997 people have browsed it
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 = ""
}
}
Related labels:
js
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template