<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table4</title>
<style>
table{ width:250px; border:1px #999999 solid; border-collapse:collapse;}
table tr th{ font:Arial, Helvetica, sans-serif; font-size:12px; background-color:#48888A; border:1px #999999 solid; padding:4px 4px;}
table tr td{ border:1px #999999 solid;}
table tr td.iss{ background-color:#58A2EB; border:2px #2D5A64 solid;}
.others{ background-color:#999999;}
table tr td ul{ list-style-type:none; position:absolute; background-color:#0099CC;}
.aa{ display:none;}
.shows{ display:block;};
</style>
</head>
<body>
<table>
<tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th></tr>
<tr><td class="others">31</td><td>1</td><td class="iss">2 <ul class="aa"><li>说明1</li><li>说明二</li></ul></td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td class="iss">7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td class="iss">13</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td class="iss">17</td><td class="iss">18</td><td>19</td><td>20</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td class="iss">26</td><td class="iss">27</td></tr>
<tr><td>28</td><td>29</td><td>30</td><td class="iss">31</td><td class="others">1</td><td class="others">2</td><td class="others">3</td></tr>
</table>
<script type="text/javascript">
var aa=document.getElementsByTagName("td");
alert("aa.length:"+aa.length);
for(var i=0;i<aa.length;i++){
if(aa[i].className=="iss"){
aa[i].onmouseover=function(){
//alert(""+this.getElementsByTagName("ul"));
this.getElementsByTagName("ul").className="shows";
alert("className:"+this.getElementsByTagName("ul").className);
}
aa[i].onmouseout=function(){
this.getElementsByTagName("ul").className="aa";
}
}
}
</script>
</body>
</html>
代码如上，为保TD中的UL不能够在鼠标移上去时显示。。。。？
