GridView 鼠标划过行变色

最新推荐文章于 2024-09-26 20:56:09 发布

原创最新推荐文章于 2024-09-26 20:56:09 发布 · 685 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

ASP.NET 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript为GridView组件添加动态行背景效果，通过鼠标悬停事件实现实时背景颜色切换，提升用户体验。具体代码示例及应用场景分析。

为了方便用户清晰地观察表格中的行信息时，我们经常想到给表格的行加上背景。但是固定的行背景有时并不能很好的区分出其它行，所以采用鼠标划过动态改变行的背景。

为了对比强烈，默认设置GridView的行背景为白色。

 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
    { 
        //如果是绑定数据行 
        if (e.Row.RowType == DataControlRowType.DataRow) 
        { 
            //鼠标经过时，行背景色变 
            e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#E6F5FA'"); 
            //鼠标移出时，行背景色变 
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'");
         }
      }