easyui的datagrid实现数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

本文介绍了一种使用JavaScript和jQuery实现数据表格中鼠标悬停显示对应图片预览的方法。当鼠标悬停在数据行上时,根据第一列的文本加载图片,并在特定位置显示图片预览框;当鼠标离开时隐藏预览框。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//实现数据行鼠标悬停/离开事件(onMouseOver/onMouseOut

                onLoadSuccess:function(){ 

                    $(".datagrid-row").mouseover(function(){ 

                        var url = $(this).children("td").eq(0).text(); 

                        if (url == "") { 

                            $("#show_img").attr("src", "${ctx}/images/person.jpg");

                           alert("");

                        } else

                            $("#show_img").attr("src", "${ctx}/" + url);

                            alert(url + "over");

                        } 

                        $("#preview").css("top", ($(this).offset().top - xOffset) + "px").css("left", ($(this).offset().left + yOffset) + "px").fadeIn("slow"); 

                    }); 

                    $(".datagrid-row").mouseout(function(){ 

                      var url = $(this).children("td").eq(0).text();

                       alert(url + "out");

                        $("#preview").hide();

                    }); 

                }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值