62,243
社区成员
发帖
与我相关
我的任务
分享鼠标悬浮获取该行ID，通过异步请求得到数据库信息，用div显示出来。
通过鼠标悬浮，获取到该行的ID，也就是第一列值，然后ajax请求获得该列详细信息，
并在鼠标旁用一块DIV显示出来。div是动态填充的，且要在鼠标悬浮处。
用的是table里面套的Repeter控件。
并在鼠标旁用一块DIV显示出来。div是动态填充的，且要在鼠标悬浮处。
用的是table里面套的Repeter控件。
...全文
请发表友善的回复…
发表回复
欲望的瞳孔 2014-01-20
- 打赏
- 举报
后期遇到了浏览器兼容的问题，我只在IE8上有效果。
by_封爱 2014-01-14
- 打赏
- 举报
http://jqueryui.com/tooltip/#custom-content
自己看吧 无非就是自定义content用Jquery请求ashx返回作为tip的content即可..
欲望的瞳孔 2014-01-14
- 打赏
- 举报
样式我有加的，上面后面发的代码
md5e 2014-01-14
- 打赏
- 举报
要加上样式
欲望的瞳孔 2014-01-14
- 打赏
- 举报
<head runat="server">
<title></title>
<style>
div.infor
{
background-color: #FFFFFF;
border: 1px #000000 solid;
position: absolute;
display: none;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<script src="../scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function () {
jQuery(".sTable tbody tr").hover(function (event) {
var _infor = jQuery(this).find(".infor");
_mx = event.clientX;
_my = event.clientY;
_infor.css({ "top": _my, "left": _mx });
_infor.show();
}, function () {
var _infor = jQuery(this).find(".infor");
_infor.hide();
});
});
</script>md5e 2014-01-14
- 打赏
- 举报
效果3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
div.infor
{
background-color:#FFFFFF;
border:1px #000000 solid;
position:absolute;
display:none;
width:300px;
height:200px;
}
</style>
</head>
<body>
<script src="Scripts/jquery-1.4.1.js"></script>
<script>
jQuery(document).ready(function () {
var _mx;
var _my;
jQuery(document).mousemove(function (event) {
var offset = jQuery(".sTable").offset();
_mx = event.clientX - offset.left + jQuery(window).scrollLeft();
_my = event.clientY - offset.top +jQuery(window).scrollTop();
var _infor = jQuery(".infor");
if (_mx > jQuery(window).width() - 300) {
_mx = _mx - 300;
}
if (_my > jQuery(window).height() - 200) {
_my = _my - 200;
}
_infor.css({ "top": _my + 10, "left": _mx + 10 });
});
jQuery(".sTable tbody tr").hover(function () {
var _infor = jQuery(this).find(".infor");
_infor.show();
}, function () {
var _infor = jQuery(this).find(".infor");
_infor.hide();
});
});
</script>
<form id="form1" runat="server">
<div>
<table class="sTable" width="100%" height="100" border="1" bordercolor="#eeeeee">
<thead>
<tr>
<td>
第一列
</td>
<td>
第二列
</td>
</tr>
</thead>
<tbody>
<tr id="1">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">1</div>
</tr>
<tr id="2">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
<tr id="3">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
<tr id="4">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
<tr id="5">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
<tr id="6">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
<tr id="7">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
<tr id="Tr1">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">1</div>
</tr>
<tr id="Tr2">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
<tr id="Tr3">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
<tr id="Tr4">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
<tr id="Tr5">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
<tr id="Tr6">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
<tr id="Tr7">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
欲望的瞳孔 2014-01-14
- 打赏
- 举报
上面是我用到我代码里的，运行后鼠标无效果。
欲望的瞳孔 2014-01-14
- 打赏
- 举报
<table class="sTable" width="300" height="100" border="1" bordercolor="#eeeeee">
<thead>
<tr>
<th>
编号
</th>
<th>
姓名
</th>
<th>
姓别
</th>
<th>
邮箱
</th>
<th>
联系方式
</th>
<th>
婚姻状况
</th>
<th>
生日
</th>
<th>
地址-市
</th>
<th>
地址-区
</th>
<th>
地址-县
</th>
<th>
详细地址
</th>
<th>
客户状态
</th>
<th>
是否共享
</th>
<th>
所属用户
</th>
<th>
职位
</th>
<th>
阶段设定
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<asp:Repeater ID="rep_Custornmer" runat="server">
<ItemTemplate>
<tr>
<td>
<%# Eval("c_id") %>
</td>
<td>
<%--onmouseover="title=' <%#Eval("c_city") %> <%#Eval("c_district") %> <%#Eval("c_county") %> <%#GetPosition( Eval("c_position").ToString()) %>'"--%>
<%#Eval("c_name") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "c_sex").ToString()=="0"?"男":"女" %>
</td>
</td>
<td>
<%#Eval("c_email") %>
</td>
<td>
<%#Eval("c_contact") %>
</td>
<td>
<%# GetMarry(Eval("c_marry").ToString())%>
</td>
<td>
<%#Eval("c_birthday") %>
</td>
<td>
<%#Eval("c_city") %>
</td>
<td>
<%#Eval("c_district") %>
</td>
<td>
<%#Eval("c_county") %>
</td>
<td>
<%#Eval("c_address") %>
</td>
<td>
<%# GetState( Eval("c_state").ToString()) %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "c_share").ToString() == "0" ? "不共享" : "共享"%>
</td>
<td>
<%# GetUser( Eval("c_userid").ToString()) %>
</td>
<td>
<%#GetPosition( Eval("c_position").ToString()) %>
</td>
<td>
<%# GetStage( Eval("c_stage").ToString()) %>
</td>
<td>
<asp:LinkButton ID="lbtn_up" Style="text-decoration: none" runat="server" PostBackUrl='<%#"CustonmerUpdate.aspx?id="+Eval("c_id") %>'>编辑</asp:LinkButton>
<asp:LinkButton ID="bltn_del" runat="server" Style="text-decoration: none" OnClick="bltn_del_Click"
OnClientClick="return confirm('确定要删除此信息？');" CommandArgument='<%#Eval("c_id") %> '>删除</asp:LinkButton>
</td>
</tr>
<div class="infor">
1</div>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>md5e 2014-01-14
- 打赏
- 举报
效果2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
div.infor
{
background-color:#FFFFFF;
border:1px #000000 solid;
position:absolute;
display:none;
width:300px;
height:200px;
}
</style>
</head>
<body>
<script src="Scripts/jquery-1.4.1.js"></script>
<script>
jQuery(document).ready(function () {
var _mx;
var _my;
jQuery(document).mousemove(function (event) {
_mx = event.clientX;
_my = event.clientY;
var _infor = jQuery(".infor");
_infor.css({ "top": _my+10, "left": _mx+10 });
});
jQuery(".sTable tbody tr").hover(function () {
var _infor = jQuery(this).find(".infor");
_infor.show();
}, function () {
var _infor = jQuery(this).find(".infor");
_infor.hide();
});
});
</script>
<form id="form1" runat="server">
<div>
<table class="sTable" width="300" height="100" border="1" bordercolor="#eeeeee">
<thead>
<tr>
<td>
第一列
</td>
<td>
第二列
</td>
</tr>
</thead>
<tbody>
<tr id="1">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">1</div>
</tr>
<tr id="2">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
md5e 2014-01-14
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
div.infor
{
background-color:#FFFFFF;
border:1px #000000 solid;
position:absolute;
display:none;
width:300px;
height:200px;
}
</style>
</head>
<body>
<script src="Scripts/jquery-1.4.1.js"></script>
<script>
jQuery(document).ready(function () {
jQuery(".sTable tbody tr").hover(function (event) {
var _infor = jQuery(this).find(".infor");
_mx = event.clientX;
_my = event.clientY;
_infor.css({ "top": _my, "left": _mx });
_infor.show();
}, function () {
var _infor = jQuery(this).find(".infor");
_infor.hide();
});
});
</script>
<form id="form1" runat="server">
<div>
<table class="sTable" width="300" height="100" border="1" bordercolor="#eeeeee">
<thead>
<tr>
<td>
第一列
</td>
<td>
第二列
</td>
</tr>
</thead>
<tbody>
<tr id="1">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">1</div>
</tr>
<tr id="2">
<td>
aa
</td>
<td>
bb
</td>
<div class="infor">2</div>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
欲望的瞳孔 2014-01-14
- 打赏
- 举报
很急呀，项目需求。大神快现身！
欲望的瞳孔 2014-01-14
- 打赏
- 举报
主要是悬浮获取ID的JQuery代码以及动态以div显示在鼠标悬浮处。
欲望的瞳孔 2014-01-14
- 打赏
- 举报
OK，成功！谢谢。
md5e 2014-01-14
- 打赏
- 举报
<tr id="<%# Eval("c_id")%>">
或
<tr><td><%# Eval("c_id")%></td>..
jQuery(this).find("td").eq(0).html()
欲望的瞳孔 2014-01-14
- 打赏
- 举报
md5e 2014-01-14
- 打赏
- 举报
jQuery(".sTable tbody tr").hover(function () {
var _infor = jQuery(this).find(".infor");
_infor.show();
alert(jQuery(this).attr("id"));
}, function () {
var _infor = jQuery(this).find(".infor");
_infor.hide();
});
欲望的瞳孔 2014-01-14
- 打赏
- 举报
还有一个问题，我要的是动态的获得悬浮行的id
解决这个就送分了！
欲望的瞳孔 2014-01-14
- 打赏
- 举报
屌丝，你给我一个全英文的...
