html中用js实现的表格隔行换色

来源：互联网发布：sql获取整数位数编辑：程序博客网时间：2024/05/23 01:03

写的时候把自己的表

//写的时候把自己的表的table加上id="tbl"<table id="tbl">

代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>表格隔行换色</title>        <script>            window.onload = function(){                //1.获取表格                var tblEle = document.getElementById("tbl");                //2.获取表格中tbody里面的行数(长度)                var len = tblEle.tBodies[0].rows.length;                //alert(len);                //3.对tbody里面的行进行遍历                for(var i=0;i<len;i++){                    if(i%2==0){                        //4.对偶数行设置背景颜色                        tblEle.tBodies[0].rows[i].style.backgroundColor="pink";                    }else{                        //5.对奇数行设置背景颜色                        tblEle.tBodies[0].rows[i].style.backgroundColor="gold";                    }                }            }        </script>    </head>    <body>        <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>    </body></html>

阅读全文

0 0