GridView 实现鼠标跟随颜色变化

问题提出：

我们可以看到很多Web程序中使用的Table显示数据，当鼠标移动到Table上的一行时，这一行的背景色会发生变化，鼠标移出这个区域的时候，恢复原来的颜色。

ASP.NET 中的GridView本身是不具备这个功能，本文讨论如何实现这个功能。

解决方法：

如果编写静态的html页面，只要为table的tr标记编写js脚本，跟踪onmouseover,onmouseout事件。在GridView控件的RowDataBound事件中添事件处理代码。

protected void gvStudent_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
         //为tr元素添加事件
        e.Row.Attributes["onmouseover"] = "changeBgColor(this,'#84DFC1');";
        e.Row.Attributes["onmouseout"] = "restoreBgColor(this)"; 

    }
}

在ASPX页面增加javascript脚本

 

function changeBgColor(ctl,color){
    /**//* 将元素原始背景色记录在 restoreColor 中 */
    ctl.restoreColor = ctl.style.backgroundColor;
    ctl.style.backgroundColor = color;
}
function restoreBgColor(ctl,color){
    ctl.style.backgroundColor = ctl.restoreColor;
}
 

 

改进的问题：

在代码中定义颜色不具备灵活性，如果使用修改了Theme中的定义，配色就可能不合适了。最好的解决方法是定义mouseover时css样式。