Dom文本应用-表格隔行间亮样式

效果：  隔行一个颜色，鼠标移上去，被选中的那一行就变颜色，其次，鼠标离开其区域，颜色又变回原来的颜色。

一、表格隔行间亮样式-HTML代码

　　首先我们要有个表格

　　

 <table id='tab1' border=1 , align='center' ,, solid>

 <thead>

 <td>编号</td><td>姓名</td><td>年龄</td>

 <thead>

 <tbody >

 <tr><td>001</td><td>杨家将</td><td>24</td></tr>

 <tr><td>002</td><td>钟女神</td><td>20</td></tr>

 <tr><td>003</td><td>方大佬</td><td>23</td></tr>

 <tr><td>004</td><td>翁少爷</td><td>23</td></tr>

 </tbody>

 </table>

二、添加js代码

　　在window.onload加载完窗口后执行代码

　　

<script>

window.onload = function(){

    var oTab = document.getElementById('tab1');    //获取table表格元素保存在
　　oTabvar oldColr = '';　　　　　　　　　　　　　　　　　//保存原来行间的颜色

    for(var i=0;i<oTab.tBodies[0].rows.length;i++){   //for循环多少行 rows代表行，tBodies代表第一个表格tbody

        oTab.tBodies[0].rows[i].onmouseover = function(){   //添加移动事件

            oldColr = this.style.background;　　　　　　　　　//将自己原本的颜色赋值给空字符串

            this.style.background = 'green';                //移入变绿色

            }

        oTab.tBodies[0].rows[i].onmouseout = function(){    //添加移出事件

            this.style.background = oldColr;                //将之前保存的老颜色，赋值给自己

            }

        if(i%2){　　　　

            oTab.tBodies[0].rows[i].style.background = '#CCC';

            }else{

                oTab.tBodies[0].rows[i].style.background = 'red';

                }

        }

    };

</script>

三、效果截图

   鼠标放在第一行，第一行变绿色

  鼠标离开，则变回原来的颜色