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>

  • 相关阅读:
    12个Web开发者应该掌握的Firebug技巧
    sql语句修改表结构
    从数据库中查询数据
    收发短信API
    日志12.03
    监听短信数据库变化
    漫谈C语言及如何学习C语言(转)
    阅读短信
    在src文件中寻找短信数据库表
    拦截短信示例1
  • 原文地址:https://www.cnblogs.com/benjamin77/p/9160619.html
Copyright © 2011-2022 走看看