隔行换色

隔行换色：

　　一个表格，隔一行换一个色

　　效果图：

　　　　

　　技术分析：

　　　　事件：onload

　　　　获取元素：dom操作

　　获取元素方法：

　　　　document.getElementById("id"):通过id获取一个元素

　　　　document.getElementByTagName(“标签名”)：通过标签名获取一种元素（多个） 返回一个数组

　　　　Array：

　　　　　　常用属性：

　　　　　　　　length:数组的长度

　　步骤分析：

　　　　1.html表格一加载时， 确定事件 onload

　　　　2.编写函数

　　　　　　a.获取元素(所有tr元素)

　　　　　　b.操作（若当前行是偶数的话加一个样式，若是奇数的话，加另一个样式）

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
    </head>
    <script>
        onload = function(){
            //获取一种元素，返回一个数组
            var arr = document.getElementsByTagName("tr");
            //for循环遍历
            for(var i = 1;i < arr.length;i++){
                if(i%2==0){
                    arr[i].style.backgroundColor="white";
                }else{
                    arr[i].style.backgroundColor="#62A8EA";
                }
            }
        }
    </script>
    <body>
        <table id="tab1" border="1" width="800" align="center" >
            
            <tr style="background-color: #999999;">
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
        </table>
    </body>
</html>
隔行换色

3.jQuery版 --- 隔行换色

posted @ 2020-07-07 21:36  Yisennnn丶  阅读(147)  评论(0)    收藏  举报