首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS示例24-隔行换色(表格)

JS示例24-隔行换色(表格)

作者头像
专注APP开发
发布2019-11-07 16:12:07
3.7K0
发布2019-11-07 16:12:07
举报
文章被收录于专栏:移动大前端移动大前端
oTBodys.rows[i].style.background = 'gray';
<!DOCTYPE >
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <script>
            window.onload = function() {
                var oTab = document.getElementById('tab1');
                var oTBodys = oTab.tBodies[0]; // tbody可能有多个,取第一个
                for(var i = 0; i < oTBodys.rows.length; i++) {
                    if(i % 2 != 0) {
                        oTBodys.rows[i].style.background = 'gray';
                    }
                }
            }
        </script>
    </head>

    <body>

        <table id="tab1" width="500" border="1">
            <thead>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Blue</td>
                    <td>27</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>张三</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>李四</td>
                    <td>28</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>王五</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>张伟</td>
                    <td>24</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>林一</td>
                    <td>25</td>
                </tr>
            </tbody>
        </table>
    </body>

</html>

image.png

鼠标移入变色
<!DOCTYPE >
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <script>
            window.onload = function() {
                var oTab = document.getElementById('tab1');
                var oTBodys = oTab.tBodies[0]; // tbody可能有多个,取第一个
                var oldColor;
                for(var i = 0; i < oTBodys.rows.length; i++) {

                    oTBodys.rows[i].onmouseover = function() {
                        oldColor = this.style.background;
                        this.style.background = 'blue';
                    }
                    oTBodys.rows[i].onmouseout = function() {
                        this.style.background = oldColor;
                    }
                    if(i % 2 != 0) {
                        oTBodys.rows[i].style.background = 'gray';
                    } else {
                        oTBodys.rows[i].style.background = oldColor;
                    }
                }
            }
        </script>
    </head>

    <body>

        <table id="tab1" width="400" border="1">
            <thead>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Blue</td>
                    <td>27</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>张三</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>李四</td>
                    <td>28</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>王五</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>张伟</td>
                    <td>24</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>林一</td>
                    <td>25</td>
                </tr>
            </tbody>
        </table>
    </body>

</html>

image

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • oTBodys.rows[i].style.background = 'gray';
  • 鼠标移入变色
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档