需求如下:
页面有一个table,鼠标在其中的一个td上悬停3秒就把这个td内容的详细信息在鼠标下方出现一个div中显示;
当鼠标移开该td,div隐藏。效果类似Eclipse的焦点查询功能;这个功能用js如何实现,用jquery更好。
求高手指教
页面有一个table,鼠标在其中的一个td上悬停3秒就把这个td内容的详细信息在鼠标下方出现一个div中显示;
当鼠标移开该td,div隐藏。效果类似Eclipse的焦点查询功能;这个功能用js如何实现,用jquery更好。
求高手指教
<script type="text/javascript">
$(function(){
$("#tab td").mouseover(function(){
this.delay = setTimeout(function(){
//显示你的东东
}, 3*1000);
}).mouseout(function(){
//隐藏你显示的东东
clearTimeout(this.delay);
});
});
</script>
还有我的table是用jqgrid.js生成的;而且页面有很多table怎么确定是我需要提示的table的td呢
$(function(){
$("td").mouseover(function(){
this.delay = setTimeout(function(){
//显示你的东东
alert($(this).html());
}, 3*1000);
}).mouseout(function(){
//隐藏你显示的东东
clearTimeout(this.delay);
});
});
$(function(){
$("td").mouseover(function(){
this.delay = setTimeout(function(){
//显示你的东东
alert($(this).html());
}, 3*1000);
}).mouseout(function(){
//隐藏你显示的东东
clearTimeout(this.delay);
});
});怎么取得td的内容呢?我取是null啊
<td title='要显示的内容'>.....</td>
<div id="div" onmouseover="waitShow(this, 1)" onmouseout="waitShow(this, 2)">简介</div><script>
var time = k = 0;
function waitShow(div, type){
if(type == 1){
if(k < 0){
k = 0;
return false;
}
time += 0.5;
setTimeout("waitShow(div, 1)", "500");
if(time >= 3)div.innerHTML = "详细内容";
}else{
k = -1;
time = 0;
div.innerHTML = "简介"
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript">
<!--
function $(id){
return document.getElementById(id) || null;
}
function showTips(msg,event){
var x = event.clientX+document.body.scrollLeft;
var y = event.clientY+document.body.scrollTop;
setTimeout(function(){
var tips = $("tips");
if(tips){
tips.innerHTML = msg;
tips.style.cssText = "left: "+x+"px; top: "+y+"px; display: block;";
}
},3000);
}
function hidTips(){
var tips = $("tips");
if(tips){
tips.style.display = "none";
}
}
//-->
</script>
<style type="text/css">
#tips{position: absolute; width: 200px; border: 1px solid #B0B0B0; background-color: #FAFAAB; display: none; padding: 5px;}
</style>
</head>
<body>
<div>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td onmouseover="showTips(this.innerHTML,event)" onmouseout="hidTips()">提示信息</td>
</tr>
</table>
</div>
<div id="tips"></div>
</body></html>
还有怎么确定弹出div的位置,要在td的下方。
求解~~~
onmouseover延迟执行,onmouseout直接执行了;
过3秒onmouseover执行的时候就会弹出div来;
不信你自己试
var x = event.clientX+document.body.scrollLeft;
var y = event.clientY+document.body.scrollTop;
tips.timeId = setTimeout(function(){
var tips = $("tips");
if(tips){
tips.innerHTML = msg;
tips.style.cssText = "left: "+x+"px; top: "+y+"px; display: block;";
}
},3000);
}
function hidTips(){
var tips = $("tips");
if(tips){
clearTimeout(tips.timeId);
tips.style.display = "none";
}
}
怎么把事件加上去?怎么取得td里面的内容?
要是自己写的td就方便多了。
<script type="text/javascript">
function setTdTitle()
{
var tds=document.getElementsByTagName("td");
var len=tds.length;
for(var i=0;i<len;i++)
{
tds[i].title=tds[i].innerHTML;
}
}
window.onload=setTdTitle;
</script>
还要往上面加事件
头疼