本代码主要演示的是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. Find Median from Data Stream - LeetCode

    Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...

  2. luogu P1027 Car的旅行路线

    题目描述 又到暑假了,住在城市A的Car想和朋友一起去城市B旅游.她知道每个城市都有四个飞机场,分别位于一个矩形的四个顶点上,同一个城市中两个机场之间有一条笔直的高速铁路,第I个城市中高速铁路了的单位 ...

  3. python正则表达式从路径中取文件名出来不加后缀（txt）

    正则表达式[^\\/:*?"<>|\r\n]+$ ---->取文件名包括后缀 e.g. >>>D:\PyCharm 2018.2.4\pythonWork ...

  4. DotnetBrowser入门教程-（3）启动与使用简单的WebSocket服务

    websocket是个很好的通信协议,基本可以贯穿支持html5的所有设备.dotnetbrowser内置了对websocket服务端与客户端的支持.请看例子: 1.新建桌面项目,基于.net 4.0 ...

  5. HPU 3639--Hawk-and-Chicken【SCC缩点反向建图 &amp;&amp; 求传递的最大值】

    Hawk-and-Chicken Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  6. 2016.7.12 去除mybatis-generator生成的class里的注释

    用mybatis-generator自动生成代码会出现很多没必要的注释.     在配置文件里加上: 是否去除所有自动生成的文件的时间戳: 是否去除所有自动生成文件的注释: <commentGe ...

  7. ubuntu更改mysql的编码配置

    1.Ctrl+t打开终端 2.输入mysql -u root -p 命令,进入MySQL 输入 SHOW VARIABLES LIKE 'char%'; 查看MySQL编码,有两个不是utf8 3.在 ...

  8. 模拟利器Mockito

    16.3.1  模拟测试概述 目前支持Java语言的Mock测试工具有EasyMock.JMock.Mockito.MockCreator.Mockrunner.MockMaker等,Mockito是 ...

  9. 浅谈对TDD的看法

    程序猿对TDD这个词一定不陌生.近几年比較火.英文全称Test-Driven Development,測试驱动开发. 它要求在编写某个功能的代码之前先编写測试代码,然后仅仅编写使測试通过的功能代码,通 ...

  10. ios控件自定义指引

    转载自:http://bbs.9ria.com/thread-256747-1-1.html 一直以来都想写点什么,做点有意义的事,从今天开始我将会把自己在这一年的学习和应用IOS开发中的学习心得和体 ...