zoukankan      html  css  js  c++  java
  • javascript 表格隔行换色

    用到的知识点:

    获取表格元素

    tbody 和 rows都是有索引的

    这里我们只有一组tbody所以 索引是0

    偶数行 索引取余2为0

    奇数行 索引取余2不为0

    通过 遍历行索引设置相应的颜色。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>表格隔行换色</title>
            <script type="text/javascript">
                window.onload=function(){
                    //1.获取表格
                    var tbEle=document.getElementById("tbl");
                    //2.获取表格中tbody里面的行数(长度)
                    var len=tbEle.tBodies[0].rows.length;
                    //3.对tbody里面的行进行遍历
                    for(var i=0;i<len;i++){
                        if(i%2==0){
                            //4.对偶数行设置背景颜色
                            tbEle.tBodies[0].rows[i].style.backgroundColor="pink";
                        }else{
                            tbEle.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>

  • 相关阅读:
    HTML
    HTML
    HTML
    HTML
    HTML
    HTML
    HTML
    TOMCAT-IDEA远程debug方法
    调整mysql数据库最大连接数
    win10开机时内存使用率达到99%以上
  • 原文地址:https://www.cnblogs.com/benjamin77/p/9160619.html
Copyright © 2011-2022 走看看