本代码主要演示的是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. Jenkins强制设置语言为中文

    解决方法如下: 1.使用中文版的google浏览器,并确定把语言设置成了中文.语言配置在设置页.如下: 2.直接设置jenkins的语言.强制性. 前提:先安装插件:Locale plugin 配置如 ...

  2. Android Studio 中.android 文件夹移动默认位置

    转自 开发工具打造: .android 文件夹移动默认位置 .android 文件夹是用来存放 avd 模拟器文件的文件夹. 因为默认是 C盘 的. 占用空间比较大.很不爽 将它移动到其它盘其实很简单 ...

  3. 双网卡环境导致Oracle连接异常

    现在就是流行向最高水平看齐,这次项目的部署,好好的SQL Server扔了(有正版授权的企业版,神啊...),逢人就夸:“俺们那上的可是最顶级的Oracle Database System!”.看了看 ...

  4. RecyclerView的滚动事件分析

    列表的滚动一般分为两种: 手指按下 -> 手指拖拽列表移动 -> 手指停止拖拽 -> 抬起手指 手指按下 -> 手指快速拖拽后抬起手指 -> 列表继续滚动 -> 停 ...

  5. eos wasm虚拟机相关接口定义实现

    wasm虚拟机相关接口定义实现 执行流程 controller::push_transaction()  // 事务 -> transaction_context::exec()  // 事务 ...

  6. SSH（Struts2 + Hibernate + Spring）嵌入 KindEditor（KE）

      1.    kindeditor 灌水 (下载地址,demo)          经过两天的折磨,又源代码,又官网学习,又网络搜索的,终于成功的嵌入KindEditor了. KindEditor确 ...

  7. 九度oj题目&amp;吉大考研10年机试题全解

    吉大考研机试2010年题目 题目一(jobdu1478:三角形的边).    http://ac.jobdu.com/problem.php?pid=1478 给出三个正整数,计算最小的数加上次小的数 ...

  8. void f(int(&amp;p)[3]){} 和void f(int(*p)[3]){}的差别

    #include<iostream> using namespace std; void f(int(&p)[3]){          cout<<p[0]<& ...

  9. solor5.4学习笔记

    1.下载地址:http://archive.apache.org/dist/lucene/solr/ 2.与tomcat的整合http://jingyan.baidu.com/article/d807 ...

  10. 跳转前暂停几秒js如何实现

    jquery如何实现跳转前暂停几秒 今天有个需求,类似答题的,需要显示结果后再跳转. 此处直接通过settimeout实现. 代码如下: url = 'www.baidu.com'; setTimeo ...