javascript 怎么鼠标停留在表格的某个单元格上，获得该单元格的值
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
background-color:#FF0;
left:159px;
top:100px;
width:100px;
height:100px;
z-index:99;
display:none;
}
-->
</style>
<script type="text/javascript" src="E:\包\jquery\jquery-1.6.4.js"></script>
<script type="text/javascript">
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(value,s){
ev = window.event;
var mousePos = mousePosition(ev);
var apdiv=document.getElementById('apDiv1');
apdiv.style.display='block';
apdiv.style.left = mousePos.x;
apdiv.style.top = mousePos.y;
document.getElementById("apDiv1").innerHTML = $("#"+value+":nth-child("+s+")").html();
}
// document.onmousemove = mouseMove;
function mouseOut(){
document.getElementById("apDiv1").style.display='none';
}
</script>
</head>
<body>
<div id="apDiv1">aaa</div>
<div>
<table width="200" border="1" id="table1">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr">
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</div>
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
background-color:#FF0;
left:159px;
top:100px;
width:100px;
height:100px;
z-index:99;
display:none;
}
-->
</style>
<script type="text/javascript" src="E:\包\jquery\jquery-1.6.4.js"></script>
<script type="text/javascript">
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(value,s){
ev = window.event;
var mousePos = mousePosition(ev);
var apdiv=document.getElementById('apDiv1');
apdiv.style.display='block';
apdiv.style.left = mousePos.x;
apdiv.style.top = mousePos.y;
document.getElementById("apDiv1").innerHTML = $("#"+value+":nth-child("+s+")").html();
}
// document.onmousemove = mouseMove;
function mouseOut(){
document.getElementById("apDiv1").style.display='none';
}
</script>
</head>
<body>
<div id="apDiv1">aaa</div>
<div>
<table width="200" border="1" id="table1">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr">
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</div>
</body>
</html> 展开
1个回答
展开全部
跟随鼠标移动
<script type="text/javascript" src="inc/jquery.v1.3.js"></script>
我链接了自己的jQuery文件，你换成自己的就可以用了：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
background-color:#FF0;
left:159px;
top:100px;
width:100px;
height:100px;
z-index:99;
display:none;
text-align:center;
}
-->
</style>
<script type="text/javascript" src="inc/jquery.v1.3.js"></script>
<script type="text/javascript">
$(function(){
$("td").mouseover(function(){
$("#apDiv1").show().html($(this).html());
})
$("td").mousemove(function(event){
var x= event.pageX + 10 + "px";
var y= event.pageY + 10 + "px";
$("#apDiv1").css({"left":x,"top":y});
})
$("td").mouseout(function(){ $("#apDiv1").hide(); })
})
</script>
</head>
<body>
<div id="apDiv1">aaa</div>
<div>
<table width="200" border="1" id="table1">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</div>
</body>
</html>
<script type="text/javascript" src="inc/jquery.v1.3.js"></script>
我链接了自己的jQuery文件，你换成自己的就可以用了：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
background-color:#FF0;
left:159px;
top:100px;
width:100px;
height:100px;
z-index:99;
display:none;
text-align:center;
}
-->
</style>
<script type="text/javascript" src="inc/jquery.v1.3.js"></script>
<script type="text/javascript">
$(function(){
$("td").mouseover(function(){
$("#apDiv1").show().html($(this).html());
})
$("td").mousemove(function(event){
var x= event.pageX + 10 + "px";
var y= event.pageY + 10 + "px";
$("#apDiv1").css({"left":x,"top":y});
})
$("td").mouseout(function(){ $("#apDiv1").hide(); })
})
</script>
</head>
<body>
<div id="apDiv1">aaa</div>
<div>
<table width="200" border="1" id="table1">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
