本代码主要演示的是for循环,

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JavaScript for循环实现表格隔行变色</title>

    <script>

        window.onload=function () {

            oTab = document.getElementById('tab1');

            for(var i=0;i<oTab.tBodies[0].rows.length; i++){

                if(i%2){

                    oTab.tBodies[0].rows[i].style.backgroundColor='green';

                }else {

                    oTab.tBodies[0].rows[i].style.backgroundColor='lightgreen'

                }

            }

        }

    </script>

</head>

<body>

<table id="tab1" width="500px" border="1px grap solid">

    <thead>

        <tr>

            <td>ID</td>

            <td>NAME</td>

            <td>AGE</td>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>01</td>

            <td>Apollo</td>

            <td>28</td>

        </tr>

        <tr>

            <td>02</td>

            <td>Ann</td>

            <td>25</td>

        </tr>

        <tr>

            <td>03</td>

            <td>Merry</td>

            <td>26</td>

        </tr>

        <tr>

            <td>04</td>

            <td>John</td>

            <td>26</td>

        </tr>

        <tr>

            <td>05</td>

            <td>Eva</td>

            <td>28</td>

        </tr>

    </tbody>

</table>

</body>

</html>

JavaScript for循环实现表格隔行变色的更多相关文章

  1. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  2. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  3. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  4. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  5. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  6. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  7. JS实现表格隔行变色

    用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...

  8. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  9. css3表格隔行变色和表格选中变颜色代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Ruby Time And DateTime之Time in Core

    今天遇到一个问题,就是在Ruby中对于Time和DateTime的使用,不是很明了,现在研究一下: 先说Time: 在Ruby2.0中关于Time有两处定义一个是在Core中,http://www.r ...

  2. 审查php.ini自动分析程序

    源码 https://github.com/sektioneins/pcc 使用方法 环境: mac cli 命令行执行 git clone https://github.com/sektionein ...

  3. 【mybatis】从一个错误，看mybatis中的#和$的区别

    事情的发展是这样的: 因为一个需求,需要在java中拼接出一个完整的sql语句,然后将整条sql语句传递给mybatis执行. mapper.java是这样的: int insertMaster(Wo ...

  4. 【spring cloud】@EnableTransactionManagement注解的意义

    @EnableTransactionManagement注解的意义

  5. 模拟登陆web微信的流程和参数细节

    这几天在用python写了一个模拟登陆web微信,发送和接受信息的程序.发现步骤不多,但需要的参数太多了 整个过程中,务必保证session.headers.cookie一致,不然的话,中间会出现登陆 ...

  6. ubuntu归档管理器消失了？

    Ubuntu - gnome 下的归档管理器软件名称:    file-roller如果没有看看是不是这个包让你删除掉了?用这个命令查: dpkg -l | grep file-roller 如果有这 ...

  7. PHP计算两个时间的年数、月数以及天数

    如何获取两个不同时间相差几年几月几日呢?比如当前时间距离2008年08月08日的北京奥运会有几年几月几日了?需要说明的是:1.定义一年为360天,一个月为30天:2.代码中86400=24*60*60 ...

  8. dedecms 调用栏目或文章所属上下级关系

    效果如下: 代码如下: <div class="place"> <strong>当前位置:</strong> {dede:field name= ...

  9. Java的日志模块

    目前主流的是是logback和log4j2,它们底层实现用的都是slf4j,通过slf4j-api调用 使用指定类初始化日志对象,在日志输出的时候,可以打印出日志信息所在类如:Logger logge ...

  10. windows8开发-关于wp7应用迁移到win8 metro风格

    虽然微软说,wp7应用移植到win8上面是比较简单,只需要修改部分API和设计原则上的细节,同时它也提供了一份比较简洁的参考文档: 而实际上这种移植的工作量还是不小的,尤其当应用引用了较多底层的API ...