鼠标悬浮到表格的单元格上,将弹出一个框,框中显示这个单元格的内容。框失去焦点,框也消失。利用jQuery+javascript写的。

这篇博客展示了如何使用jQuery和JavaScript实现鼠标悬浮到表格单元格上时,弹出一个显示单元格内容的框。当鼠标离开时,该框会自动消失。代码示例中,创建了一个隐藏的div元素,并在鼠标悬停于td元素上时设置定时器显示内容,离开时清除定时器并隐藏div。
aaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbb
ccccccccccddddddddd
代码如下
<html>
	<head>
	<script type="text/javascript" src="F:\workspace\JavaDemo\js\jquery-1.4.3.js"></script>
		<script type="text/javascript">
		$(function(){
			var d = $("<div id='d' style='background-color:white;border:1px solid #DCE6F5;display:none;padding:10px 20px 10px 20px;}'/> <div>");// 获取<div id="d">的
			var tableTag = $("table");
			tableTag.append(d);
			var dTag = d.get(0);
			var timer = null;
			$("td[name$='_td']").each(
				function(i){
					var tdTag = $(this);
					var offset = tdTag.offset();
					var left = offset.left;
					var top = offset.top;
					tdTag.mouseover(function(){
							timer=setTimeout(
								function(){
									timer=0;d.css("display","");
									dTag.style.position="absolute";
									dTag.style.left=left+10;
									dTag.style.top=top+3;
									d.text(tdTag.text());
								},1100
							);
						}
					);
					tdTag.mouseout(function(){
						if(timer)  {
							clearTimeout(timer);
							timer=0;
							return;
						}
						d.blur(function(){
							d.css("display","none");
						});
					});
				}
			);
		});
		</script>
		<title>悬浮</title>
	</head>
	<body>
		
		<table border="1" cellpadding="0" cellspacing="0" align="center">
			<tr height="30px">
				<td name="one_td">aaaaaaaaaa</td><td name="two_td">bbbbbbbbbbbbbbbbbbbbbbb</td>
			</tr>
			<tr height="30px">
				<td name="one_td">cccccccccc</td><td name="two_td">ddddddddd</td>
			</tr>
		</table>
	<body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值