本代码主要演示的是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. Css 基础学习

    css 基本选择器 css基本选择器有三种方法 第一种: class选择器 .c1{ color: red;} <div class='c1'>hello world</div> ...

  2. Delphi通过管道执行外部命令行程序（cmd）并获取返回结果

    该代码片段来自于: http://www.sharejs.com/codes/delphi/8999,发现好多代码,想用的时候找不到,记录一下备用 function RunDosCommand(Com ...

  3. 基于WPF系统框架设计(9)-多值绑定之IMultiValueConverter

    应用场景 我想把View层的一个布局控件和功能按钮传到ViewModel层,达到动态变更布局,同时灵活获取功能按钮的属性,让View和ViewModel完全分离,而不受View层影响. 最后我想到使用 ...

  4. Linux下测试PHP和MySQL是否正确安装

    测试PHP: 本打算这样配置: 1.拷贝PHP配置文件 cd /usr/local/php/etc cp php.ini /usr/local/php/lib/php.ini 2.修改apache配置 ...

  5. SilverLight-DataBinding-DataTemplates: 三、数据绑定 DataTemplates模板的使用（求助，没有到达实例效果，求高人指点迷津）

    ylbtech-SilverLight-DataBinding-DataTemplates: 三.数据绑定 DataTemplates模板的使用 1.A, Data Templates Intro(数 ...

  6. oracle手动修改listener.ora和tnsnames.ora之后竟然无效

    oracle手动修改listener.ora和tnsnames.ora之后竟然无效 花式重启都没有生效,需要使用Net Configuration Assistant来进行刷一下,重新生成的监听还是一 ...

  7. struts2注解总结----@Action和@Result

    除了使用配置文件配置之外,还能够使用注解来配置 以下是一些经常使用的注解 介绍: @Action/@Actions: @Action指定一个类为action,相应配置文件里的<action> ...

  8. mysql使用mysqldump 与 mysqlimport进行数据库迁移

    1.导入数据库 1)source source /home/platvt/product/pc2_create_tables.sql 2)mysqlimport 使用mysqlimport导入数据: ...

  9. JavaScript中推断一个对象是否为&quot;空对象”

    JavaScript中推断一个对象是否为"空对象" 这里指的"空对象"是类似于:{ } 和 new Object() 这种. 详细的代码实现和原理例如以下: / ...

  10. EXCel鼠标右键不能用解决办法

    EXCel鼠标右键不能用解决办法 倒腾vba首要是保证安全,各路大神的代码非常神奇,莫名的就让你的excel嘎嘣了,如出现右键无法使用(确定不是您的鼠标问题),那么以下代码可完全修复设置.操作步骤:打 ...