<!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="X-UA-Compatibl(www.111cn.net)e"?content="IE=EmulateIE7"?/>
<title>查看本次</title>
<link?href="css/Gcss.css"?rel="stylesheet"?type="text/css"?/>
<style?type="text/css">
body,td,th?{
?font-family:?"楷體";
?color:?black;
}
a:link?{
?color:purple;font-size:30;
}
a:visited?{
?color:purple;font-size:30;
}
a:active{color:green;font-size:30;}
a:hover{
color:red;font-family:楷體;font-size:30;}
#name{position:absolute;top:0%;left:90%;}
#h{position:absolute;top:5%;left:30%;}
#exit{position:absolute;top:0;right:0;}
#weather{position:absolute;bottom:80%;right:0;}
</style>
</head>
<body>
<div?id=header>
<div?id="background"?class="wall"></div>
????????<div?id="midground"?class="wall"></div>
????????<div?id="foreground"?class="wall"></div>
<img?src="images/xh.jpg"?height="20%"?width="20%">
<div?id=h>
<marquee?behavior=scroll?direction=left?width=700?hspace=1?vspace=2?scrollmount=1?scrolldelay=0?loop=-1>
<font?size=7?color=black?face="楷體"><b>翱翔云簽到--軟件與微電子學院<sup>©</sup></b></font>
</marquee></div>
<div?id=name><input?type="button"?value="changkunp">
</div>
<div?id=exit><input?type=button?value="注銷">
</div>?
</div>
<div?id=sidebar>
<ul>
<li><a?href="Hindex.html"><font?size=5>首頁</font></a></li>
<li><a?href="Hnew.html"><font?size=5>新建簽到</font></a></li>
<li><a?href="G-lookToday.html"><font?size=5>查看本次</font></a></li>
<li><a?href="G-History.html"><font?size=5>歷史記錄</font></a></li>
<li><a?href="#"><font?size=5>設置管理員</font></a></li>
<li><a?href="#"><font?size=5>管理用戶</font></a></li>
<a?href="Hago.html"><font?size=5>查看歷史</font></a></li>
</ul>
</div>
</div>
<div?id=mainbox>
<div?id="demo">
<table?name="table1"?width=90%?height=70%?border=1?>
<tr><td>班級</td><td>學號</td><td>姓名</td><td>次數:已/總</td><td>更多</td></tr>
<tr?name=r1><td?name=d11>14011401</td><td?name=d12>2014303311</td><td?name=d13>某某某</td><td?name=d14>4/5</td><td?name=d15><a?class="tooltip"?id="tooltip1">詳情</a></td></tr>
<tr?name=r2><td?name=d21>14011401</td><td?name=d22>2014303321</td><td?name=d23>某某某</td><td?name=d24>4/5</td><td?name=d25><a?class="tooltip"?id="tooltip2">詳情</a></td></tr>
<tr?name=r3><td?name=d31>14011401</td><td?name=d32>2014303331</td><td?name=d33>某某某</td><td?name=d34>4/5</td><td?name=d35><a?class="tooltip"?id="tooltip3">詳情</a></td></tr>
<div?id="txt"></div>
</table>
</div>
</div>
<script>
????function?addEvent(element,?event,?callbackFunction)?{
????????if?(element.addEventListener)?{
????????????element.addEventListener(event,?callbackFunction,?false);
????????}?else?if?(element.attachEvent)?{
????????????element.attachEvent('on'?+?event,?callbackFunction);
????????}
????}
var?toolTipBoxClass?=?"tooltip-box";
var?isIE?=?navigator.userAgent.indexOf("MSIE")?>?-1;
var?getEl?=?function(id){?
????return?document.getElementById(id);
}
var?demo?=?getEl("demo");
//obj?-?ToolTip?超鏈接元素
//id?-?ToolTip提示框id
//html?-?ToolTip提示框HTML
//width?-?ToolTip提示框寬度（可選）
//height?-?ToolTip提示框高度（可選）
function?showToolTip(obj,?id,?html,?width,?height){
?if(getEl(id)==null){?
?????//創建?<div?class="tooltip-box"?id="xx">xxxxxx</div>
??var?toolTipBox;
??toolTipBox?=?document.createElement("div");
??toolTipBox.className?=?toolTipBoxClass;
??toolTipBox.id?=?id;
??toolTipBox.innerHTML?=?html;
??obj.appendChild(toolTipBox);
??
??toolTipBox.style.width?=?width??width+"px":"auto";
??toolTipBox.style.height?=?height??height+"px":"auto";
??
??if(!width?&&?isIE){?
??????toolTipBox.style.width?=?toolTipBox.offsetWidth;
??}
??
??toolTipBox.style.position?=?"absolute";
??toolTipBox.style.display?=?"block";
??
??var?left?=?obj.offsetLeft;
??var?top?=?obj.offsetTop?+?20;
??
??//left，不讓ToolTip提示框超出瀏覽器
??if(left?+?toolTipBox.offsetWidth?>?document.body.clientWidth){?
??????var?demoLeft?=?demo.offsetLeft;
???left?=?document.body.clientWidth?-?toolTipBox.offsetWidth?-?demoLeft;
???if?(left?<?0)?left?=?0;
??}
??
??toolTipBox.style.left?=?left?+?"px";
??toolTipBox.style.top?=?top?+?"px";
??
??addEvent(obj,"mouseleave",?function(){
???setTimeout(function(){
???????getEl(id).style.display?=?"none";
???},?300);
??});
?}
?else{?
?????//顯示
??getEl(id).style.display?=?"block";
?}?
}
addEvent(demo,?"mouseover",?function(e){
?var?event?=?e?||?window.event;?
?var?target?=?event.target?||?event.srcElement;
?
?if(target.className?==?"tooltip"){?
?
?????var?_html;
??var?_id;
??var?_width?=?200;
??
????????????switch?(target.id)?{
????????????????case?"tooltip1":
????????????????????_id?=?"t1";
????????????????????_html?=?"中華人民共和國";
????????????????????break;
????????????????case?"tooltip2":
????????????????????_id?=?"t2";
????????????????????_html?=?"<tr><td>班級</td><td>學號</td><td>姓名</td><td>次數:已/總</td><td>更多</td></tr>
<tr?name=r1><td?name=d11>14011401</td><td?name=d12>2014303311</td><td?name=d13>某某某</td><td?name=d14>4/5</td><td?name=d15>詳情</td></tr>
<tr?name=r2><td?name=d21>14011401</td><td?name=d22>2014303321</td><td?name=d23>某某某</td><td?name=d24>4/5</td><td?name=d25>詳情</td></tr>
<tr?name=r3><td?name=d31>14011401</td><td?name=d32>2014303331</td><td?name=d33>某某某</td><td?name=d34>4/5</td><td?name=d35詳情</td></tr>";
????????????????????break;
????????????????case?"tooltip3":
????????????????????_id?=?"t3";
????????????????????_html?=?"<h2>簽到詳情</h2><p>春眠不覺曉，</p><p>處處聞啼鳥。</p><p>夜來風雨聲，</p><p>花落知多少。</p>";
????????????????????_width?=?100;
????????????????????break;
????????????????????break;
????????????????default:
????????????????????return?false;
????????????}
????????????showToolTip(target,?_id,?_html,?_width);
?
?}
});
</script>
<div?id=footer>
<font?size=6?color=yellow?face="楷體"><center>翱翔云簽到--軟件與微電子學院--2015/7/24<sup>©</sup></center></font>
</div>
?
</body>
</html>
2016-10-23
你的table的html寫的有問題，拼接不對，參考如下，已經能顯示
? ? ? ? ? ? ? ? ? ? _html = "<table><tr><td>班級</td><td>學號</td><td>姓名</td><td>次數:已/總</td><td>更多</td></tr>"+
"<tr name='r1'><td name='d11'>14011401</td><td name='d12'>2014303311</td><td name='d13'>某某某</td><td name='d14'>4/5</td><td name='d15'>詳情</td></tr>"+
"<tr name='r2'><td name='d21'>14011401</td><td name='d22'>2014303321</td><td name='d23'>某某某</td><td name='d24'>4/5</td><td name='d25'>詳情</td></tr>"+
"<tr name='r3'><td name='d31'>14011401</td><td name='d32'>2014303331</td><td name='d33'>某某某</td><td name='d34'>4/5</td><td name='d35詳情'</td></tr></table>";