window.onload = function () {

document.getElementById('btn').onclick = function () {
                var trs = document.getElementById('tb').getElementsByTagName('tr');
                for (var i = 0; i < trs.length; i++) {
                    if (i % 2 != 0) {
                        trs[i].style.backgroundColor = 'yellow';
                    } else {
                        trs[i].style.backgroundColor = '';
                    }
                }
            };
        };
<input type="button" name="name" value="变色" id="btn" />
    <table id="tb" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td>
            AAAAAAAAAAAAAAAAAA
            </td>
              <td>
            AAAAAAAAAAAAAAAAAA
            </td>
              <td>
            AAAAAAAAAAAAAAAAAA
            </td>
        </tr>
        <tr>
            <td>
            AAAAAAAAAAAAAAAAAA
            </td>
              <td>
            AAAAAAAAAAAAAAAAAA
            </td>
              <td>
            AAAAAAAAAAAAAAAAAA
            </td>
        </tr>
        <tr>
            <td>
            AAAAAAAAAAAAAAAAAA
            </td>
              <td>
            AAAAAAAAAAAAAAAAAA
            </td>
              <td>
            AAAAAAAAAAAAAAAAAA
            </td>
        </tr>
        <tr>
            <td>
            AAAAAAAAAAAAAAAAAA
            </td>
              <td>
            AAAAAAAAAAAAAAAAAA
            </td>
              <td>
            AAAAAAAAAAAAAAAAAA
            </td>
        </tr>
</table>

[原]点击按钮,表格隔行变色:偶数行为黄色背景,奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr,依次遍历,如果是偶数就…………。的更多相关文章

  1. JS实现表格隔行变色

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

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

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

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

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

  4. JavaScript 实现表格隔行变色

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

  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. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

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

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

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

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

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

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

随机推荐

  1. chapter9_1 协同程序

    协同程序与线程差不多,也就是一条执行序列:有自己独立的栈.局部变量.指令指针,以及和其他协同程序共享的全局变量和其他大部分东西. 两者区别在于:一个多线程的程序可以同时运行几个线程,而协同程序却需要彼 ...

  2. G - 娜娜梦游仙境系列——梦醒

    G - 娜娜梦游仙境系列——梦醒 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Others) ...

  3. 使用计算监控(Using computed observables)

    计算监控(Computed Observables) 如果有两个监控属性firstName, lastName,此时我们要显示full name,我们要怎么办呢? 这时,可以创建一个computed ...

  4. Vasya and String(尺取法)

    Vasya and String time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  5. java代理的深入浅出(三)-JavaAssist,ASM

    简介 类似字节码操作方法还有ASM.几种动态编程方法相比较,在性能上Javassist高于反射,但低于ASM,因为Javassist增加了一层抽象.在实现成本上Javassist和反射都很低,而ASM ...

  6. radiobutton以及checkbox背景图片拉伸变形的问题

    设置RadioButton的text属性,只需要有这个属性就可以(设置“”内容就行),然后再添加textsize属性,将字体大小属性值设置为比较小,我设置为2sp.运行后我们会发现图片变形问题不复存在 ...

  7. 在OSchina上看到的清理到缓存的方法

    /* * *文 件 名: DataCleanManager.java * 描 述: 主要功能有清除内/外缓存,清除数据库,清除sharedPreference,清除files和清除自定义目录 */ i ...

  8. java对象和json对象之间互相转换

    import java.util.ArrayList;import java.util.Collection;import java.util.Iterator;import java.util.Li ...

  9. angular中的ng-bind-html指令和$sce服务

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...

  10. spring securiy使用总结

    我们常见的几个功能: 注册后直接登录,并且remember-me这种在网上找到很多注册后登录的,但是remember-me没有.其实解决方案还是看源码比较方便.a. 装载authenticationM ...