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

最新推荐文章于 2024-07-12 18:29:20 发布

周先森爱编程丶

最新推荐文章于 2024-07-12 18:29:20 发布

阅读量7.2k

点赞数

分类专栏： js 文章标签：表格隔行换色 js html

本文链接：https://blog.csdn.net/qq_37796017/article/details/78003248

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

写的时候把自己的表

//写的时候把自己的表的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>