本代码主要演示的是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. POJ 3268 Silver Cow Party (Dijkstra + 优先队列)

    题意:由n个牧场,编号1到n.每个牧场有一头牛.现在在牧场x举办party,每头牛都去参加,然后再回到自己的牧场.牧场之间会有一些单向的路.每头牛都会让自己往返的路程最短.问所有牛当中最长的往返路程是 ...

  2. mysql null与not null

    http://blog.csdn.net/fwkjdaghappy1/article/details/7703974/ NULL表示 值 可为NULL,并非空的意思, NOT NULL表示 值不能为N ...

  3. vim批量缩进功能

    注释符号:" :set tabstop=4 设定tab宽度为4个字符 :set shiftwidth=4 设定自动缩进为4个字符 :set expandtab 用space替代tab的输入 ...

  4. mbr 备份

    MBR共512字节 (1) 第1-446字节:调用操作系统的机器码. (2) 第447-510字节:分区表(Partition table). (3) 第511-512字节:主引导记录签名(0x55和 ...

  5. vue2.0 仿手机新闻站（六）详情页制作

    1.结构 2.配置详情页路由 router.config.js /** * 配置 路由 */ // 导入组件 import Home from './components/Home.vue' impo ...

  6. MSComm串口类的使用 （程序设计）

    参考文档:http://wenku.baidu.com/link?url=MLGQojaxyHnEgngEAXG8oPnISuM9SVaDzNTvg0oTSrrJkMXIR_6MR3cO_Vnh-gr ...

  7. mongodb: 安装 建/删 库，表

    mongodb的安装 下载mongodb www.mongodb.org 下载最新stable版 解压文件 3.不用编译,解压之后本身就是编译后的二进制可执行文件 解压之后,目录格式如下 在bin目录 ...

  8. iframe中，重新加载页面

    比如在iframe中的页面,设置一个onclick事件的触发函数flush function flush(){ window.location.reload(); }

  9. java代码实现输出指定以.java结尾的文件的绝对路径

    package 输出指定文件绝对路径; import java.io.File; /* * 需求:请大家把"E:\\JAVA语言"文件夹下全部的java结尾的文件的绝对路径给输出在 ...

  10. 命令行运行java

    运行TestLinuxCommand.java     代码 import java.io.BufferedReader; import java.io.BufferedWriter; import ...