JavaScript表格的隔行换色开发

Posted 杨校老师

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript表格的隔行换色开发相关的知识,希望对你有一定的参考价值。

html代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>隔行换色</title>
        
    </head>
    <body>
        <table id="tab1" border="1" width="800" align="center" >
            
            <tr style="background-color: #999999;" align ="center">
                <th>分校ID</th>
                <th>分校地区</th>
            
                <th>操作</th>
            </tr>
            <tr align ="center">
                <td>1</td>
                <td>济南分校</td>
            
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr align ="center">
                <td>2</td>
                <td>昆山分校</td>
                
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr align ="center">
                <td>3</td>
                <td>重庆分校</td>
                
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr align ="center">
                <td>4</td>
                <td>内蒙分校</td>
            
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr align ="center">
                <td>5</td>
                <td>大连分校</td>
            
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
        </table>
    </body>
</html>

 

javascript代码:

      <script>
            //页面一打开就自动加载成功
            window.onload=function(){
                //1.通过标签名称进行获取所有的tr,存放到arr数组中去
                var arr=document.getElementsByTagName("tr");
                //2.判断奇偶数 添加不同的样式 遍历数组
                for(var i=1;i<arr.length;i++){
                    //如果是偶数行
                    if(i%2==0){
                        // 偶数的某一行的样式背景颜色设置为=   亮粉色
                        arr[i].style.backgroundColor="lightpink";
                    }else{//否则是奇数行
                        // 奇数的某一行的样式背景颜色设置为   深天空蓝
                        arr[i].style.backgroundColor="deepskyblue";
                    }
                }
                
            }
        </script>

效果图:

 

 

分割线 
作者: 杨校

出处: http://www.cnblogs.com/xiaoxiao5016

分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 如有问题, 可邮件(397583050@qq.com)咨询。

以上是关于JavaScript表格的隔行换色开发的主要内容,如果未能解决你的问题,请参考以下文章

javascript 表格隔行换色

jQuery实现的table表格隔行换色代码实例

表格 的 隔行换色

jQuery应用实例2:表格隔行换色

记账本开发记录——第五天(2020.1.22)

JQ——选择器的应用(表格的隔行换色全选和全不选)