弹出详细信息提示窗口

项目中客户对表格中信息多的地方提出需要用.....代替现实的内容 当鼠标移动到那个区域弹出小窗口提示详细信息 这样表格显示的时候就显得整齐好看了
<td onMouseOver="showInfoDiv()" onMouseOut="hiddenInfoDiv()">
<span id="WFNNAMES" name="WFNNAMES">
<xsl:value-of select="WFNNAMES"/>
</span>
<input type="hidden" name="WFNNAME">
<xsl:attribute name="value">
<xsl:value-of select="WFNNAME"/>
</xsl:attribute>
</input>
</td>
......


......
var jddivs = null;
function ceateInfoDiv(id) {
if (jddivs == null) {
var div = document.createElement("div");
div.id = id;
div.style.position = "absolute";

jddivs = div;
}
return jddivs;
}

function showInfoDiv() {
var curEmt = event.srcElement;
var curTR = findParentEmt(curEmt, "TR");
var rowno = curTR.rowIndex;
var wfnnames = exratelist.rows[rowno].all("WFNNAME").value;

var id="infoDiv";
var div=ceateInfoDiv(id);
if (wfnnames != "完成" && wfnnames.indexOf("|") >= 0) {
div.innerHTML = "<table><tr class='report_fonts'><td>" + wfnnames + "</td></tr></table>";
div.style.display = "block";
div.style.backgroundColor = "#BCD8ED";
div.style.left = event.clientX + document.body.scrollLeft + "px";
div.style.top = event.clientY + document.body.scrollTop + "px";
document.body.appendChild(div);
}

}

hiddenInfoDiv = function() {
var id="infoDiv";
document.getElementById(id).style.display="none";
}
.....
从代码可以很直接的看出是通过鼠标移动触发 然后生成一个div 在生成的div中展示数据 这其中容易出现的问题是显示的时候div和鼠标的位置隔很远 不在所期待的位置 这个是由于包含这个div的窗口有滚动条导致 所以在div的显示位置要absolute 要加上窗口滚动条的位置
另外一个注意的地方就是对div中的内容进行样式的控制 可事先写好需要的样式 然后直接div.innerHTML = "<table><tr class='report_fonts'><td>" + wfnnames + "</td></tr></table>";把样式写进去即可 方便快捷