div图层显示问题，不知道难不难

Question

<table width="100%" border="1">
<tr>
<td width="335">abc</td>
<td width="324">abc</td>
<td width="254">abc</td>
<td width="54">abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td colspan="3">three column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td colspan="3">three column</td>
</tr>
<tr>
<td>abc</td>
<td colspan="2">two column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr><tr>
<td width="335">abc</td>
<td width="324">abc</td>
<td width="254">abc</td>
<td width="54">abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td colspan="3">three column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td colspan="3">three column</td>
</tr>
<tr>
<td>abc</td>
<td colspan="2">two column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr><tr>
<td width="335">abc</td>
<td width="324">abc</td>
<td width="254">abc</td>
<td width="54">abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td colspan="3">three column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td colspan="3">three column</td>
</tr>
<tr>
<td>abc</td>
<td colspan="2">two column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr><tr>
<td width="335">abc</td>
<td width="324">abc</td>
<td width="254">abc</td>
<td width="54">abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td colspan="3">three column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td colspan="3">three column</td>
</tr>
<tr>
<td>abc</td>
<td colspan="2">two column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr><tr>
<td width="335">abc</td>
<td width="324">abc</td>
<td width="254">abc</td>
<td width="54">abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td colspan="3">three column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td colspan="3">three column</td>
</tr>
<tr>
<td>abc</td>
<td colspan="2">two column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr><tr>
<td width="335">abc</td>
<td width="324">abc</td>
<td width="254">abc</td>
<td width="54">abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td colspan="3">three column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td colspan="3">three column</td>
</tr>
<tr>
<td>abc</td>
<td colspan="2">two column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr><tr>
<td width="335">abc</td>
<td width="324">abc</td>
<td width="254">abc</td>
<td width="54">abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td colspan="3">three column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td colspan="3">three column</td>
</tr>
<tr>
<td>abc</td>
<td colspan="2">two column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr><tr>
<td width="335">abc</td>
<td width="324">abc</td>
<td width="254">abc</td>
<td width="54">abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td colspan="3">three column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td colspan="3">three column</td>
</tr>
<tr>
<td>abc</td>
<td colspan="2">two column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr><tr>
<td width="335">abc</td>
<td width="324">abc</td>
<td width="254">abc</td>
<td width="54">abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td colspan="3">three column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td colspan="3">three column</td>
</tr>
<tr>
<td>abc</td>
<td colspan="2">two column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr><tr>
<td width="335">abc</td>
<td width="324">abc</td>
<td width="254">abc</td>
<td width="54">abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td colspan="3">three column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td colspan="3">three column</td>
</tr>
<tr>
<td>abc</td>
<td colspan="2">two column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr><tr>
<td width="335">abc</td>
<td width="324">abc</td>
<td width="254">abc</td>
<td width="54">abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td colspan="3">three column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td colspan="3">three column</td>
</tr>
<tr>
<td>abc</td>
<td colspan="2">two column</td>
<td>abc</td>
<td width='22'>abc</td>
</tr>
</table>
<div style="position:absolute;border:1px solid #666;background:#DDD;width:200px;height:80px;padding:10px;display:none" id="tip"></div>
<script language="javascript">
<!--
var tds = document.getElementsByTagName("td");
for( var i=0;i<tds.length;i++)
{
var tip = document.getElementById("tip");
tds[i].onmouseover=function(e)
{
e = window.event || e;
x = (e.x || e.layerX) + document.body.scrollLeft;
y = (e.y || e.layerY)  + document.body.scrollTop;
if( x + parseInt(tip.style.width) > document.body.clientWidth )
x -= parseInt(tip.style.width);
if( y + parseInt(tip.style.height) > document.body.clientHeight )
y -= parseInt(tip.style.height);
tip.style.left= x+"px";
tip.style.top = y+"px";
tip.innerHTML = "aaaaa<br>pp";
tip.style.display=""; }
tds[i].onmouseout= function()
{
tip.style.display="none";
}
}
//-->
</script>

Answer 1

感谢ice_berg16(寻梦的稻草人)的回复，我试验过了，您的代码就是我所想要得结果，但是当我套用在我的叶面上的时候却问题依旧，折腾了2小时也没弄好，不知是何原因，小弟太笨了:(我根据您的代码，只修改了我代码中与您不一样的部分，代码如下，比较长，拖动比较麻烦，不好意思阿:)请ice_berg16(寻梦的稻草人)再帮小弟看看好吗，不胜感激。

Answer 2

代码太长，不让发布，分两部分，
part1：<!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=gb2312" />
<title>Display</title>
<script type="text/JavaScript">
<!--
function showinfo(detailinfo) {
detailinfo = detailinfo.replace(/\~/g," ");
detailinfo = detailinfo.split('^');
e = window.event || e;
x = (e.x || e.layerX) + document.body.scrollLeft;
y = (e.y || e.layerY) + document.body.scrollTop;
if( x + parseInt(tip.style.width) > document.body.clientWidth )
x -= parseInt(tip.style.width);
if( y + parseInt(tip.style.height) > document.body.clientHeight )
y -= parseInt(tip.style.height);
tip.style.left= x+"px";
tip.style.top = y+"px";
tip.innerHTML = "<b>Department: </b>"+detailinfo[0]+"<br><b>Tel: </b>"+detailinfo[1]+"<br><b>Name: </b>"+detailinfo[2]+"<br><b>Content: </b>"+detailinfo[3];
tip.style.display="";
}
function hideinfo() { 
tip.style.display="none";
}
//-->
</script>
</head>
<body leftmargin="0" rightmargin="0"><div style="z-index:10;font-family: Geneva, Arial, Helvetica, sans-serif;position:absolute;border:1px solid #666666;background:#99CCFF;width:250px;height:100px;padding:10px;display:none;color:#0000FF" id="tip"></div>
<p align="center"><b><font color="#E8092B">Testing...</font></b></p>
<table width="100%" border="0" cellspacing="1" cellpadding="3" bgcolor="#666666">
  <tr bgcolor=white>
    <th width="5.8%">1</th>
    <th width="5.8%">2</th>
    <th width="5.8%">3</th>
    <th width="5.8%">4</th>
    <th width="5.8%">5</th>
    <th width="5.8%">6</th>
    <th width="5.8%">7</th>
    <th width="5.8%">8</th>
    <th width="5.8%">9</th>
    <th width="5.8%">10</th>
    <th width="5.8%">11</th>
    <th width="5.8%">12</th>
    <th width="5.8%">13</th>
    <th width="5.8%">14</th>
    <th width="5.8%">15</th>
    <th width="5.8%">16</th>
    <th width="7%">17</th>
  </tr>

  <tr bgcolor="#FFFFFF" height="35">
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>

  <tr bgcolor="#FFFFFF" height="35">
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>

  <tr bgcolor="#FFFFFF" height="35">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan=2 align=center bgcolor='#DDAFFF' onmouseover=showinfo('11^22^33^44') onmouseout=hideinfo()><font color=#336699>222<br>333</font></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td><td></td>
  </tr>

  <tr bgcolor="#FFFFFF" height="35">
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>

  <tr bgcolor="#FFFFFF" height="35">    
<td align=center bgcolor='#FFE4C4' onmouseover=showinfo('222^222^222^222') onmouseout=hideinfo()><font color=#336699>222<br>222</font></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>

  <tr bgcolor="#FFFFFF" height="35">    
<td align=center bgcolor='#ADD8E6' onmouseover=showinfo('3^3^3^3') onmouseout=hideinfo()><font color=#336699>3<br>3</font></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

  </tr>

  <tr bgcolor="#FFFFFF" height="35">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td><td align=center bgcolor='#DDAFFF' onmouseover=showinfo('24^24^24^24') onmouseout=hideinfo()><font color=#336699>24<br>24</font></td>
<td></td><td></td>

  </tr>

Answer 3

part2：<tr bgcolor="#FFFFFF" height="35">
<td></td><td></td><td></td><td></td><td></td><td align=center bgcolor='#FFB6C1' onmouseover=showinfo('111^111^111^111') onmouseout=hideinfo()><font color=#336699>111<br>111</font></td>
<td colspan=2 align=center bgcolor='#98FB98' onmouseover=showinfo('11^22^33^44') onmouseout=hideinfo()><font color=#336699>11<br>22</font></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>

  <tr bgcolor="#FFFFFF" height="35">
<td></td>
<td></td>
<td></td>
<td colspan=4 align=center bgcolor='#FFE4C4' onmouseover=showinfo('HR^2221^wen^ff') onmouseout=hideinfo()><font color=#336699>wen<br>meeting</font></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td><td colspan=3 align=center bgcolor='#A9A9A9' onmouseover=showinfo('13^13^13^13') onmouseout=hideinfo()><font color=#336699>13<br>13</font></td>
  </tr>

  <tr bgcolor="#FFFFFF" height="35">    
<td align=center bgcolor='#ADD8E6' onmouseover=showinfo('222^222^222^222') onmouseout=hideinfo()><font color=#336699>222<br>222</font></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

  </tr>

  <tr bgcolor="#FFFFFF" height="35">
   <td align=center bgcolor='#DDAFFF' onmouseover=showinfo('3^3^3^3') onmouseout=hideinfo()><font color=#336699>3<br>3</font></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

  </tr>

  <tr bgcolor="#FFFFFF" height="35">
  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td colspan=2 align=center bgcolor='#FFB6C1' onmouseover=showinfo('16^16^16^16') onmouseout=hideinfo()><font color=#336699>166666666<br>16</font></td>
  </tr>

  <tr bgcolor="#FFFFFF" height="35">
<td></td><td></td><td></td><td></td><td></td>
<td></td>
<td colspan=2 align=center bgcolor='#FFE4C4' onmouseover=showinfo('11^22^33^44') onmouseout=hideinfo()><font color=#336699>11<br>22</font></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>

   <tr bgcolor="#FFFFFF" height="35">
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>

  <tr bgcolor="#FFFFFF" height="35">
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>

  <tr bgcolor="#FFFFFF" height="35">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan=2 align=center bgcolor='#DDAFFF' onmouseover=showinfo('11^22^33^44') onmouseout=hideinfo()><font color=#336699>222<br>333</font></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td><td></td>
  </tr>

  <tr bgcolor="#FFFFFF" height="35">
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>

  <tr bgcolor="#FFFFFF" height="35">    
<td align=center bgcolor='#FFE4C4' onmouseover=showinfo('222^222^222^222') onmouseout=hideinfo()><font color=#336699>222<br>222</font></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>

  <tr bgcolor="#FFFFFF" height="35">    
<td align=center bgcolor='#ADD8E6' onmouseover=showinfo('3^3^3^3') onmouseout=hideinfo()><font color=#336699>3<br>3</font></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

  </tr>

  <tr bgcolor="#FFFFFF" height="35">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td><td align=center bgcolor='#DDAFFF' onmouseover=showinfo('24^24^24^24') onmouseout=hideinfo()><font color=#336699>24<br>24</font></td>
<td></td><td></td>

  </tr></table></body>
</html>

Answer 4

改了下面的函数
function showinfo(detailinfo) {
detailinfo = detailinfo.replace(/\~/g," ");
detailinfo = detailinfo.split('^');
e = window.event || e;
x = (e.x || e.layerX) + document.documentElement.scrollLeft;
y = (e.y || e.layerY) + document.documentElement.scrollTop;
//alert(y + parseInt(tip.style.height));
if( x + parseInt(tip.style.width) > document.documentElement.clientWidth )
x -= parseInt(tip.style.width);
if( y + parseInt(tip.style.height) > document.documentElement.clientHeight )
y -= parseInt(tip.style.height);
tip.style.left= x+"px";
tip.style.top = y+"px";
tip.innerHTML = "<b>Department: </b>"+detailinfo[0]+"<br><b>Tel: </b>"+detailinfo[1]+"<br><b>Name:</b>"+detailinfo[2]+"<br><b>Content: </b>"+detailinfo[3];
tip.style.display="";
}原因是因为21行的字符串不能断行