表格元素的快捷获取以及隔行变色、鼠标移入变色案例

要求：以下列代码为基础，添加JS代码，令表格实现隔行变色效果，并且实现鼠标移入表格，该行表格背景色变为绿色，移出表格后表格恢复为原隔行变色形式的背景色。

<table id='tab1'  border="1" width="500" align="center" >
    <thead>
        <tr><td>ID</td><td>姓名</td><td>年龄</td></tr>
    </thead>
    <tbody>
        <tr><td>A</td><td>阿童木</td><td>3</td></tr>
        <tr><td>B</td><td>机器猫</td><td>4</td></tr>
        <tr><td>C</td><td>小叮当</td><td>5</td></tr>
        <tr><td>D</td><td>海雅</td><td>6</td></tr>
        <tr><td>E</td><td>祖鲁</td><td>7</td></tr>
    </tbody>
</table>

完成后的JS代码

window.onload=function()
{
    var oTab=document.getElementById('tab1');
    //获取table中的目标行
    var aTr=oTab.tBodies[0].rows;
    var oldColor="";
    for(var i=0;i<aTr.length;i++)
    {
        //隔行变色
        if(i%2)
        {
            aTr[i].style.background="#ccc";
        }
        else
        {aTr[i].style.background="";}
        
        aTr[i].onmouseover=function()
        {   //获取鼠标移入行的原本背景色
            oldColor=this.style.background;
            this.style.background="green";
        }
        aTr[i].onmouseout=function()
        {
           this.style.background=oldColor;
        }
    }
                 
};

编辑程序时出现的问题：

1、鼠标移出后，该行恢复原来的黑白相间的效果没有做对。需要在aTr[i].onmouseover后面的函数中增加获取鼠标移入前的背景色：oldColor=this.style.background;，当鼠标移出后，背景色赋值为该值，以保证移出鼠标后黑白相间的背景色效果不变。