关于用JS控制onmouseover和 onmouseOut 的样式问题

下面是完整的代码: 
我是想通过，鼠标移到tr上面，把背景样式改变，然后,鼠标单击的时候，也该表背景颜色, 
现在这一步已经完成， 还有一个就是鼠标移到其他行,又需要恢复,onmouseover和 onmouseOut 的样式。 这个要怎么实现?请教一下... 
<html> 
<head> 
<script> 
  //单击时,改变样式; 
function onClickChangeStyle(obj){ 
   //获取表格对象; 
   var tab = document.getElementById("tab"); 
   
              //获取当前行选择下标; 
              var currentRowIndex = obj.rowIndex; //获取表格所有行数; 
   var tablRows = tab.rows.length; 
  
   //获取表格第一行,第一列的值; 
   //var firstCellValue = tab.rows[0].cells[0].innerHTML; 
   
   //获取表格的第一行，第一列的第一个元素的值; 
   //var firstChildValue = tab.rows[0].cells[0].firstChild.value; 
   
   //循环表格的所有行;并且选择的当前行，改变背景颜色； 
   for(var i = 0;i<tablRows;i=i+1){ 
   if(currentRowIndex == i){ 
     //为选中的当前，设置css样式; 
     tab.rows[i].style.cssText="background-color:00FFFF"; 
   }else{ 
   //把没有选中的行的背景样式设置为白色; 
   tab.rows[i].style.cssText="background-color:white"; 
   tab.rows[i].onmouseover = function(){ 
   this.className="displayStyle"; 
   //tab.rows[i].className="displayStyle"; 
   } 
   //绑定鼠标移开事件,并且设置样式为白色; 
   tab.rows[i].onmouseout  = function() 
   { 
   this.cssText="background-color:white;"; 
     //tab.rows[i].className="hideStyle"; 
   } 
   } 
   } 
} 
</script> <style> 
  .displayStyle{ 
background-color:blue; 
} .hideStyle{ 
background-color:white; 
} .onClickStyle{ 
background-color:red; 
} 
</style>
<title>www.yuanshi88.com</title> 
</head> <body> 
<form name="myForm"> 
<table width="100%" id="tab" name="tab"> 
<tr id="tr1" onmouseOver=this.className="displayStyle" onmouseOut=this.className="hideStyle" onclick="onClickChangeStyle(this)"> 
<td><input type="checkbox" value="11"/></td> 
<td>100</td> 
<td>张三</td> 
<td>15</td> 
<td>湖南株洲</td> 
</tr> 
<tr id="tr2" onmouseOver=this.className="displayStyle" onmouseOut=this.className="hideStyle" onclick="onClickChangeStyle(this)"> 
<td><input type="checkbox" value="22"/></td> 
<td>100</td> 
<td>李四</td> 
<td>15</td> 
<td>湖南长沙</td> 
</tr> 
<tr id="tr3" onmouseOver=this.className="displayStyle" onmouseOut=this.className="hideStyle" onclick="onClickChangeStyle(this)"> 
<td><input type="checkbox" value="33"/></td> 
<td>100</td> 
<td>王五</td> 
<td>15</td> 
<td>湖南湘潭</td> 
</tr> 
</table> 
</form> 
</body> 
</html>

解决方案 »

  1.   


    <html> 
    <head> 
    <script> 
    window.onload=function(){
       var nodes=document.getElementsByTagName("tr");
       for(var i=0;i<nodes.length;i++){
          nodes[i].onmouseover=function(){this.style.backgroundColor="blue"};
          nodes[i].onmouseout=function(){this.style.backgroundColor="white"};
      nodes[i].onclick=function(){this.style.backgroundColor="red"};
       }
    }
    </script> 
    <title>www.yuanshi88.com</title> 
    </head> <body> 
    <form name="myForm"> 
    <table width="100%" id="tab" name="tab"> 
    <tr id="tr1"> 
    <td><input type="checkbox" value="11"/></td> 
    <td>100</td> 
    <td>张三</td> 
    <td>15</td> 
    <td>湖南株洲</td> 
    </tr> 
    <tr id="tr2"> 
    <td><input type="checkbox" value="22"/></td> 
    <td>100</td> 
    <td>李四</td> 
    <td>15</td> 
    <td>湖南长沙</td> 
    </tr> 
    <tr id="tr3" > 
    <td><input type="checkbox" value="33"/></td> 
    <td>100</td> 
    <td>王五</td> 
    <td>15</td> 
    <td>湖南湘潭</td> 
    </tr> 
    </table> 
    </form> 
    </body> 
    </html>
    这样如何？
      

  2.   

    LZ用到了css样式，一楼的可能还是不行，如果是还有其他的css样式也得该那就要多条。所以不是很合适。可以用jquery达到目的。代码如下<style>
    .displayStyle {
    background-color: blue;
    }

    .hideStyle {
    background-color: white;
    }

    .onClickStyle {
    background-color: red;
    }
    </style>
    <script>
    $(document).ready(function(){
    $("tr").mouseover(function(){
         $(this).attr('class','displayStyle');
    });
    $("tr").mouseout(function(){
         $(this).attr('class','hideStyle');
    });
    $("tr").click(function(){
         $(this).attr('class','onClickStyle');
    });
    });
    </script>