已生成一个table,想在里面对tr 进行添加onmouseover ,onmouseout

已生成一个table,想在里面对tr 进行添加onmouseover ,onmouseout如：已用js生成table<table class="tbX">
<tr><td>表头</td></tr>
<tr><td>111</td></tr>
<tr><td>222</td></tr>
<tr><td>333</td></tr>
<tr><td>444</td></tr>
<tr><td>表尾</td></tr>
</table>如何用js 添加对 tr 的 onmouseover ,onmouseout 进行整行变色.....在线等..

解决方案 »

  1.   

    tr有个属性是bgColor,在onmouseover/out事件中去更换这个属性的值就可以了，如果楼主的class="tbX"影响到tr的背景色自己可以再写一个内部样式把影响行颜色的属性去掉就可以了，以至于不用去修改公用样式表而影响到其他地方
      

  2.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload = function(){
    var otrs = document.getElementsByTagName('tr');
    for(var i = 0; i < otrs.length; i++){(function(obj){
    obj.onmouseover = function(){
    obj.style.color = 'red';
    };
    obj.onmouseout = function(){
    obj.style.color = '#000000';
    };
    })(otrs[i])}
    };
    </script>
    </head><body>
    <table class="tbX">
    <tr> <td>表头 </td> </tr>
    <tr> <td>111 </td> </tr>
    <tr> <td>222 </td> </tr>
    <tr> <td>333 </td> </tr>
    <tr> <td>444 </td> </tr>
    <tr> <td>表尾 </td> </tr>
    </table> 
    </body>
    </html>
      

  3.   


    <script type="text/javascript"> 
    var cur;
    window.onload=function(){
      var tb = document.getElementsByTagName("table")[0];
      for(var i=1;i<tb.rows.length-1;i++){
        tb.rows[i].onmouseover = (function(obj){
         return function(){
         if(obj == cur) return;
         if(cur!=null) cur.style.background = "#FFF";
         obj.style.background = "#CCC";
         cur = obj;
         }
         })(tb.rows[i]);
        tb.rows[i].onmouseout = function(){
         if(cur!=null) cur.style.background = "#FFF";
         cur = null;
         };
      }
    }
    </script> 
    <table class="tbX"> 
    <tr> <td>表头 </td> </tr> 
    <tr> <td>111 </td> </tr> 
    <tr> <td>222 </td> </tr> 
    <tr> <td>333 </td> </tr> 
    <tr> <td>444 </td> </tr> 
    <tr> <td>表尾 </td> </tr> 
    </table>
      

  4.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload = function(){
    var aa = document.getElementById('aa');
    var otrs = document.getElementsByTagName('tr');
    for(var i = 0; i < otrs.length; i++){(function(obj,i){
    obj.onmouseover = function(){
    aa.rows[i].bgColor = 'red';
    };
    obj.onmouseout = function(){
    aa.rows[i].bgColor = '#ffffff';
    };
    })(otrs[i],i)}
    };
    </script>
    </head><body>
    <table id="aa" class="tbX">
    <tr> <td>表头 </td> </tr>
    <tr> <td>111 </td> </tr>
    <tr> <td>222 </td> </tr>
    <tr> <td>333 </td> </tr>
    <tr> <td>444 </td> </tr>
    <tr> <td>表尾 </td> </tr>
    </table> 
    </body>
    </html>
    这个是正行变色上面发的那个是文字变色
      

  5.   

    为什么我这样不行呢？？var myArray=document.getElementsByTagName("tr");
    for(var i=1;i<myArray.length;i++)
      {   
      myArray[i].onmouseover=function(){ rowOver(myArray[i])};                                                               
      myArray[i].onmouseout=function(){ rowOut(myArray[i])};
      }   
    其中：：
    function rowOver(target){
    if (target.style.backgroundColor!='#ffffcc')
       target.style.background='#f1f5ff';
    }
    function rowOut(target){
    if (target.style.backgroundColor!='#ffffcc')
       target.style.background='#ffffff';
    }有脚本错误...说什么Error:'style' 为空或不是对象
      

  6.   


    <script type="text/javascript"> 
    window.onload=function(){
      var myArray=document.getElementsByTagName("tr"); 
      for(var i=1;i <myArray.length;i++) 
      {  
      myArray[i].onmouseover=(function(obj){return function(){ rowOver(obj)}})(myArray[i]);                                                              
      myArray[i].onmouseout=(function(obj){return function(){ rowOut(obj)}})(myArray[i]); 
      }  }
    function rowOver(target){ 
    if (target.style.backgroundColor!='#ffffcc') 
      target.style.background='#f1f5ff'; 
    } 
    function rowOut(target){ 
    if (target.style.backgroundColor!='#ffffcc') 
      target.style.background='#ffffff'; 
    } </script> <table class="tbX"> 
    <tr> <td>表头 </td> </tr> 
    <tr> <td>111 </td> </tr> 
    <tr> <td>222 </td> </tr> 
    <tr> <td>333 </td> </tr> 
    <tr> <td>444 </td> </tr> 
    <tr> <td>表尾 </td> </tr> 
    </table>
      

  7.   

      myArray[i].onmouseover=(function(obj){return function(){ rowOver(obj)}})(myArray[i]);                                                              
      myArray[i].onmouseout=(function(obj){return function(){ rowOut(obj)}})(myArray[i]); 真神奇了。不知道什么意思。能简单解释一下呀。谢谢hookee师傅,名字好常见。
      

  8.   

    后面（myArray[i])就是执行了这个默认函数。                                                           ）
      

  9.   

    <script type="text/javascript"> 
    var cur;
    window.onload=function(){
      var tb = document.getElementsByTagName("table")[0];
      for(var i=1;i<tb.rows.length-1;i++){
        tb.rows[i].onmouseover = (function(obj){
                return function(){
                    if(obj == cur) return;
                    if(cur!=null) cur.style.background = "#FFF";
                    obj.style.background = "#CCC";
                    cur = obj;
                }
            })(tb.rows[i]);
        tb.rows[i].onmouseout = function(){
                    if(cur!=null) cur.style.background = "#FFF";
                    cur = null;
                };
      }
    }
    </script> 
    <table class="tbX"> 
    <tr> <td>表头 </td> </tr> 
    <tr> <td>111 </td> </tr> 
    <tr> <td>222 </td> </tr> 
    <tr> <td>333 </td> </tr> 
    <tr> <td>444 </td> </tr> 
    <tr> <td>表尾 </td> </tr> 
    </table>
      

  10.   

    我用另外一个方法也实现了。而且每个tr里面还有很多td。
    哈哈~~~
    每个td的颜色都不一样~~~
    childnode
    FF也支持。