zoukankan      html  css  js  c++  java
  • 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样式。

  • 相关阅读:
    家庭记账本1
    寒假福利5
    寒假福利4——定位功能
    寒假福利3——日期时间选择器
    寒假作业——家庭小账本1.6(总结)
    寒假作业——家庭小账本1.5
    寒假作业——家庭小账本1.4
    寒假作业——家庭小账本1.3
    寒假作业——家庭小账本1.2
    寒假作业——家庭小账本1.1
  • 原文地址:https://www.cnblogs.com/kodong/p/1166324.html
Copyright © 2011-2022 走看看