如下代码实现当鼠标移动到这一行，这一行颜色改变

 
    
     
         
  1. <html> 
    2.  
         
  2. <head> 
    3.  
         
  3.     <title>鼠标移动到一行变色</title> 
    4.  
         
  4.     <style type="text/css"> 
    5.  
         
  5.      
    6.  
         
  6.     </style> 
    7.  
         
  7. </head> 
    8.  
         
  8. <body> 
    9.  
         
  9.     <table border="1" align="center" id="table" width="600"> 
    10.  
         
  10.         <tr> 
    11.  
         
  11.             <th>姓名</th> 
    12.  
         
  12.             <th>年龄</th> 
    13.  
         
  13.             <th>性别</th> 
    14.  
         
  14.             <th>联系方式</th> 
    15.  
         
  15.         </tr> 
    16.  
         
  16.         <tr> 
    17.  
         
  17.             <td>小赵</td> 
    18.  
         
  18.             <td>25</td>      
    19.  
         
  19.             <td>女</td>   
    20.  
         
  20.             <td>15339125250</td>     
    21.  
         
  21.         </tr> 
    22.  
         
  22.         <tr> 
    23.  
         
  23.             <td>小钱</td> 
    24.  
         
  24.             <td>50</td>      
    25.  
         
  25.             <td>男</td>   
    26.  
         
  26.             <td>15339125251</td>     
    27.  
         
  27.         </tr>    
    28.  
         
  28.         <tr> 
    29.  
         
  29.             <td>小孙</td> 
    30.  
         
  30.             <td>20</td>      
    31.  
         
  31.             <td>女</td>   
    32.  
         
  32.             <td>15339125252</td>     
    33.  
         
  33.         </tr> 
    34.  
         
  34.         <tr> 
    35.  
         
  35.             <td>小李</td> 
    36.  
         
  36.             <td>19</td>      
    37.  
         
  37.             <td>男</td>   
    38.  
         
  38.             <td>15339125253</td>     
    39.  
         
  39.         </tr> 
    40.  
         
  40.         <tr> 
    41.  
         
  41.             <td>小杨</td> 
    42.  
         
  42.             <td>25</td>      
    43.  
         
  43.             <td>女</td>   
    44.  
         
  44.             <td>15339125254</td>     
    45.  
         
  45.         </tr> 
    46.  
         
  46.         <tr> 
    47.  
         
  47.             <td>小宋</td> 
    48.  
         
  48.             <td>12</td>      
    49.  
         
  49.             <td>女</td>   
    50.  
         
  50.             <td>15339125256</td>     
    51.  
         
  51.         </tr> 
    52.  
         
  52.     </table> 
    53.  
         
  53.  
    54.  
         
  54.     <script type="text/javascript"> 
    55.  
         
  55.         //改变表格选中行的背景颜色 
    56.  
         
  56.         function changeBgcolor(e){ 
    57.  
         
  57.         //得到事件参数对象e,ie通过window.event得到时间参数对象，非ie通过even传入 
    58.  
         
  58.             e = e || window.event; 
    59.  
         
  59.             //获取引发事件的事件源对象(此处是得到一个单元格对象) 
    60.  
         
  60.             var target = e.target || e.srcElement; 
    61.  
         
  61.             //通过节点的parentNote属性得到他的父节点对象 
    62.  
         
  62.             var tr = target.parentNode; 
    63.  
         
  63.             //设置tr节点的样式 
    64.  
         
  64.                 tr.style.background = "green"; 
    65.  
         
  65.                 tr.style.color = "red"; 
    66.  
         
  66.         } 
    67.  
         
  67.  
    68.  
         
  68.         function reback(e){ 
    69.  
         
  69.         //得到事件参数对象e,ie通过window.event得到时间参数对象，非ie通过even传入 
    70.  
         
  70.             e = e || window.event; 
    71.  
         
  71.             //获取引发事件的事件源对象(此处是得到一个单元格对象) 
    72.  
         
  72.             var target = e.target || e.srcElement; 
    73.  
         
  73.             //通过节点的parentNote属性得到他的父节点对象 
    74.  
         
  74.             var tr = target.parentNode; 
    75.  
         
  75.             //设置tr节点的样式 
    76.  
         
  76.                 tr.style.background = "white"; 
    77.  
         
  77.                 tr.style.color = "black"; 
    78.  
         
  78.         } 
    79.  
         
  79.  
    80.  
         
  80.         //得到表格对象 
    81.  
         
  81.         var tb = document.getElementById("table"); 
    82.  
         
  82.         //遍历每一行,给每一行添加事件 
    83.  
         
  83.         for(var i = 1; i< tb.rows.length; i++){ 
    84.  
         
  84.             //得到行对象 
    85.  
         
  85.             var tr = tb.rows[i]; 
    86.  
         
  86.             tr.onmouseover = changeBgcolor; 
    87.  
         
  87.             tr.onmouseout = reback; 
    88.  
         
  88.         } 
    89.  
         
  89.     </script> 
    90.  
         
  90. </body> 
    91.  
         
  91. </html> 
    92.