JS应用实例4:表格隔行换色

2018-06-24 01:27:23来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

HTML代码:

<!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;
                //3.对tbody里面的行进行遍历
                for(var i = 0; i < len; i++) {
                    if(i % 2 == 0) {
                        //4.对偶数行设置背景颜色
                        tblEle.tBodies[0].rows[i].style.backgroundColor = "blue";
                    } 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>
View Code

效果:

 

表格高亮显示:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表格隔行换色</title>
        <script>
            function changeColor(id, flag) {
                if(flag == "over") {
                    document.getElementById(id).style.backgroundColor = "red";
                } else if(flag == "out") {
                    document.getElementById(id).style.backgroundColor = "yellow";
                }
            }
        </script>

    </head>

    <body>
        <table border="1" width="500" height="50" align="center">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">
                    <td>4</td>
                    <td>小明</td>
                    <td>29</td>
                </tr>
                <tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">
                    <td>5</td>
                    <td>小红</td>
                    <td>30</td>
                </tr>
                <tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">
                    <td>6</td>
                    <td>小刚</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>

</html>
View Code

 

效果:

鼠标移到上面变成红色,移开变成黄色,不移动时候没有颜色

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:在angularjs指令中触发父组件中的方法

下一篇:JS应用实例1:表格各行换色