jquery 实现鼠标移动到table每行，此行高亮变色

/*---实现效果的 Jquery 方法---*/
$.change =function(){
        var tableid='table'; 
        var overcolor='#FCF9D8';
        var color2='#F8F8F8';
        var color1='#FFFFFF'; 
        var tablename=document.getElementById(tableid);
        var tr=tablename.getElementsByTagName("tr");
        for(var i=1 ;i<tr.length;i++){
        tr[i].onmouseover=function(){
        this.style.backgroundColor=overcolor;
    };
        tr[i].onmouseout=function(){
        if(this.rowIndex%2==0){
    this.style.backgroundColor=color2;
        }else{
    this.style.backgroundColor=color1;
   }
  };
        if(i%2==0){
        tr[i].className="color2";
  }else{
        tr[i].className="color1";
  }
 }
};


/*----效果页面及调用上面的jquery 方法---*/

$(document).ready(function() {
        //初始化页面时执行 
        $.change();
    });

  <table width="100%" border="0"
                        cellpadding="0" cellspacing="0" >
        <tr>
            <th >序号</th>
            <th >用户名称</th>
            <th >手机号码</th>
            <th >邮箱地址</th>
            <th >创建日期</th>

        </tr>
           
           <tr class="on">
            <td height="39" align="center">1</td>
            <td align="left"><a href="javascript:look('4','tclabc00001');">tclabc000sadfsadfsadfsafdsafdsafsad01</a></td>
                        <td align="left">13800138000</td>
            <td align="left">tclab23423dsasdfsafsadfasdfsac00001@email.com</td>
            <td align="left">2012-03-06</td>
          </tr>
    </table>