美文网首页
JS示例24-隔行换色（表格）

JS示例24-隔行换色（表格）

作者: 微小码 | 来源:发表于2019-04-02 17:07 被阅读0次

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

相关文章