js之表格隔行换色-蒲公英云

js之表格隔行换色

步骤分析：
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写函数(获取表格)
第三步：获取tbody里面的行数
第四步：对tbody里面的行进行遍历
第五步：获取奇数行和偶数行(角标对2取余)
第六步：分别对奇数行和偶数行设置背景颜色

js代码：

<script type="text/javascript">
        //1.获取表格
        var tal = document.getElementById("tal");
        //2.获取表格中tbody里面的行数(长度)
        var len = tal.tBodies[0].rows.length;
        //3.对tbody里面的行进行遍历
        for(var i = 0;i<len;i++){
            if(i%2==0){
                tal.tBodies[0].rows[i].style.backgroundColor = "pink";
            }else{
            tal.tBodies[0].rows[i].style.backgroundColor = "gold";
            }
        }
    }
</script>

html代码：

<table border="1" width="500" height="50" align="center" id="tbl">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>