<!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>无标题文档</title>
<style>
#chaborder td{
 border:1px solid #000;
}
body {
background-color: #009900;
}
</style>
<script language="JavaScript1.2">
function borderit(which,color){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
which.style.borderColor=color
}
}
window.onload=function(){
var obj=document.getElementById("chaborder").getElementsByTagName("td")
for (var i=0,j=obj.length;i<j;i++){
obj[i].onmouseover=function(){borderit(this,'red')}
obj[i].onmouseout=function(){borderit(this,'#000')}
}}
</script>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="600"><table width="600" border="0" cellspacing="0" cellpadding="0" id="chaborder">
      <tr>
        <td width="200" height="200"> </td>
        <td width="200"> </td>
        <td width="200"> </td>
      </tr>
      <tr>
        <td height="200"> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td height="200"> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

解决方案 »

  1.   


    <!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> 无标题文档 </title> 
    <style> 
    #chaborder td{ 
     border:1px solid #fff; 
    }
    #chaborder .border{ border:1px solid #000;  }
    body { 
    background-color: #009900; 

    </style> 
    <script language="JavaScript1.2"> window.onload=function(){ 
    var obj=document.getElementById("chaborder").getElementsByTagName("td") 
    for (var i=0,j=obj.length;i<j;i++){ 
    obj[i].onmouseover=function(){this.className = 'border'; } 
    obj[i].onmouseout=function(){this.className=''} 
    }

    </script> 
    </head> 
    <body> 
    <table width="600" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
         <td height="600"> <table width="600" border="0" cellspacing="0" cellpadding="0" id="chaborder"> 
           <tr> 
             <td width="200" height="200">   </td> 
             <td width="200">   </td> 
             <td width="200">   </td> 
           </tr> 
           <tr> 
             <td height="200">   </td> 
             <td>   </td> 
             <td>   </td> 
           </tr> 
           <tr> 
             <td height="200">   </td> 
             <td>   </td> 
             <td>   </td> 
           </tr> 
         </table> </td> 
       </tr> 
    </table> 
    </body> 
    </html>