GridView 鼠标移动变色鼠标经过行变色的几种方法

最新推荐文章于 2023-04-06 14:33:28 发布

博智诚信

最新推荐文章于 2023-04-06 14:33:28 发布

阅读量1.2k

点赞数

分类专栏： Table asp.net Jquery javascript

javascript 同时被 3 个专栏收录

81 篇文章 0 订阅

订阅专栏

asp.net

45 篇文章 0 订阅

订阅专栏

Jquery

12 篇文章 0 订阅

订阅专栏

为了方便大家观看效果，首先手动写一个GridView然后绑定数据。

前台代码：

后台cs代码：

public DataTable dt = new DataTable();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataBindGridView(gvBaidu);
        }
    }

    private void DataBindGridView(GridView Gv)
    {
        dt.Columns.Add("ID", typeof(string));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Sex", typeof(string));
        dt.Columns.Add("Age", typeof(string));
        DataRow dr = dt.NewRow();
        dr["ID"] = "1";
        dr["Name"] = "大傻";
        dr["Age"] = "18";
        dr["Sex"] = "男";
        dt.Rows.Add(dr);

        DataRow dr1 = dt.NewRow();
        dr1["ID"] = "2";
        dr1["Name"] = "花花";
        dr1["Age"] = "22";
        dr1["Sex"] = "女";
        dt.Rows.Add(dr1);

        DataRow dr2 = dt.NewRow();
        dr2["Name"] = "百度";
        dr2["ID"] = "3";
        dr2["Age"] = "88";
        dr2["Sex"] = "男";
        dt.Rows.Add(dr2);

        Gv.DataSourceID = null;
        Gv.DataSource = dt;
        Gv.DataBind();
    }

需要实现的效果：如图

方法1：

最常用的，用的也是最多的。

直接写在后台代码里。

写在RowDataBound事件中

protected void gvBaidu_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        //如果当前行尾数据行
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            //添加鼠标在当前行时的background-color属性
            e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#fcdead';");

             //鼠标离开当前行后
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
        }
    }

相对来说还是比较方便和容易理解的。
不过写在后台多少会影响性能。所以不推荐。

方法2：

JavaScript写：

//实现鼠标移入移出改变表格行背景颜色

//tableId为Gridview的id

function TbRowbgChange(tableId)

{

//获取tr

var rows =document.getElementById(tableId).getElementsByTagName("tr");

//循环遍历tr

for(var i=1;i<rows.length;i++)

{

var row = rows[i];

if(row!=null)

{

//获取tr的原背景色

var Color=row.style.backgroundColor;

row.οnmοuseοver=function(){this.style.backgroundColor='#fc0;};

row.οnmοuseοut=function(){this.style.backgroundColor=Color;};

}

简单,不影响效率.只需传入id即可.

方法3:

jQuery :

$(document).ready(function()

{

//获取背景色

var $bg;

//获取页面中的table元素的tr元素,并且tr元素中不包含th元素的hover事件

$('table tr:not(:has("th"))').hover(function()

{

$bg=$(this).css('background-color');

$(this).css('background-color','#fc0');

function()

{

$(this).css('background-color',$bg);

});

// $('img').fadeTo(2000,0.5).fadeTo(2000,1);

});

无需传入任何参数,直接就可以给所有table添加变色效果.代码清晰易懂.

博智诚信

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
GridView 鼠标移动变色鼠标经过行变色的几种方法

为了方便大家观看效果，首先手动写一个GridView然后绑定数据。前台代码：   Width="409px" CellPadding="4" ForeColor="#333333" GridLines="None">
复制链接

扫一扫