表格-鼠标经过行变色 

<title>表格-鼠标经过行变色</title>
</head>
<body>
<script language="javascript">
window.onload=function showtable(){
   var tablename=document.getElementById("mytable");
   var li=tablename.getElementsByTagName("tr");
   for (var i=0;i<=li.length;i++){
    if(i%2==0){
     li[i].style.backgroundColor="yellow";
     li[i].onmouseout=function(){
         this.style.backgroundColor="yellow"
      }
    }else{
     li[i].style.backgroundColor="yellow";
     li[i].onmouseout=function(){
         this.style.backgroundColor="yellow"
      }
    }
      li[i].onmouseover=function(){
      this.style.backgroundColor="#0f0";
      }
      
   }
}
</script>
<center>
<table id="mytable">
<tr><td>第1行</td><td>第1列</td><td>第1行</td><td>第1列</td><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td><td>第1行</td><td>第1列</td><td>第1行</td><td>第1列</td></tr>
<tr><td>第3行</td><td>第3列</td><td>第1行</td><td>第1列</td><td>第1行</td><td>第1列</td></tr>
<tr><td>第4行</td><td>第4列</td><td>第1行</td><td>第1列</td><td>第1行</td><td>第1列</td></tr>
<tr><td>第5行</td><td>第5列</td><td>第1行</td><td>第1列</td><td>第1行</td><td>第1列</td></tr>
</table>
</center>
</body>
posted @ 2011-10-13 10:54  潇墓  阅读(472)  评论(0)    收藏  举报