用JS完成对表格的隔行换色

最新推荐文章于 2023-07-07 19:17:02 发布

极客小生

最新推荐文章于 2023-07-07 19:17:02 发布

阅读量491

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/shengshengshiwo/article/details/78768909

javascript 专栏收录该内容

6 篇文章

订阅专栏

用JS完成对表格的隔行换色：

效果截图：

这里写图片描述

附上代码：

<!DOCTYPE html>
<html lang="en">
    <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 = "gold";
                    }else{
                        //5.对奇数设置背景色
                        tblEle.tBodies[0].rows[i].style.backgroundColor = "pink";
                    }
                }
            }
        </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>26</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>

学习心得

1.这玩意真的很操蛋，第一遍造轮子加了很多空格，导致错误，，，（咋这么尴尬，你以为自己是python吗？）
2.造轮子抄错了，把rows 写出 raws ,瞪大我的狗眼也没看出来错误！！比对源代码才看出来，，，
3.把rows[] 写成了 rows()，现在还不理解，明天再看看吧。
4.还有一点，，，注意缩进，好像很严格。后续慢慢学习。