JS学习第三课

1. 写表格时最好自己写上<tbody>，因为在JS里面要用，要不然html里没有，但是我们在JS里面用得飞起，也说不过去啊。
2. 获取表格元素时，tBodis[0]一定要加上，本人试过不加，然后就没有然后了。记住这几个表格的快捷标签tBodis，rows，cells。
3. 隔行变色：用的是这个小Tip哦--if（i%2)能否被2整除，相当方便。
4. 用一个变量来储存某个元素原来的属性，让该元素经过一系列变化后还能回到原来的属性。这里用了oldColor来储存原来的颜色，在鼠标移出之后，加上它，就会让这行本来是灰色的表格再变回灰色。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                window.onload=function(){
                    var oTab=document.getElementById('tab1')
                    var oldColor=''
                    for(i=0;i<oTab.tBodies[0].rows.length;i++){
                                        oTab.tBodies[0].rows[i].onmouseover=function(){
                                            oldColor=this.style.background
                        this.style.background='orange';}
                                        oTab.tBodies[0].rows[i].onmouseout=function(){
                        this.style.background=oldColor;
                    }
                        if(i%2){
                            oTab.tBodies[0].rows[i].style.background=''
                        }
                        else{
                            oTab.tBodies[0].rows[i].style.background='gray'
                        }
                    }
                }
            </script>
        </head>
        <body>
            <table id="tab1" border="1" width="400" cellpadding="15" >
                <caption>DOM高级操作试用表</caption>
                <thead>
                    <td>序号</td>
                    <td>名字</td>
                    <td>年龄</td>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>赵毅</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>钱军</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>孙火</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>李四</td>
                    <td>24</td>
                </tr>
                </tbody>
            </table>
        </body>
    </html>

   ---