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

来源：互联网发布：php 文章发布系统源码编辑：程序博客网时间：2024/06/06 01:14

aaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbccccccccccddddddddd

代码如下

<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>