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

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

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 如有问题，可邮件（[email protected]）咨询。

原文地址：https://www.cnblogs.com/xiaoxiao5016/p/9367421.html

时间： 2024-09-30 19:09:41

JavaScript表格的隔行换色开发的相关文章

JQ——选择器的应用（表格的隔行换色、全选和全不选）

1.表格的隔行换色: (1)核心代码: <script> $(function(){ $("tbody tr:even").css("background-color","red"); $("tbody tr:odd").css("background-color","yellowgreen"); }); </script> 获取tbody中的元素,并对奇数行和偶

JS实现表格自动隔行换色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>JS实现表格自动隔行换色丨石家庄冷风机|</TITLE> </HEAD> <BODY> <style> .t1 {background-color:#C8FC98;text-align:center} .t2 {backgro

JS——表格的隔行换色

1.不使用JS完成表格的隔行换色: <html> <head> <meta charset="utf-8"> <title>成绩登记表格</title> </head> <body> <table width="600" border="1" align="center" cellpadding="5" cellspa

Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Firefox / Chrome bootstrap:3.3.7 代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta

利用JavaScript的%做隔行换色

<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> li { list-style-type: none; width: 300px; height: 30px; } </style> </head> <body> <ul> <li

表格的隔行换色

jQuery代码: $(function(){ var item = $("tr"); for(var i=0;i<item.length;i++){ if(i%2==0){ item[i].style.backgroundColor="#888"; } } //

为了增强用户体验,快速识别行内容,一般都会在一些列表或者表格设置隔行换色~ 本人了解到的有两种常用的方法~ 1,利用CSS进行隔行换色 tr{ background: #E0F0FA;} tr:nth-child(2n){ background: white;} //规定属于其父元素的第2n(第偶数个)个子元素的每个 tr 的背景色 tr{ background-color: expression((this.sectionRowIndex % 2 == 0) ? "#E0F0FA"

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

这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script type="text/javascr

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

jQuery实现的table表格隔行换色代码实例:下面是一段代码实例,能够实现隔行变色的效果,这是网站人性化措施之一,在实际应用中的使用非常广泛.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t