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. Chapter 14_2 全局变量声明

    Lua中的全局变量不需要声明就可以使用.对于小程序十分方便,但是大型程序中 一处简单的笔误就可能造成难以发现的bug. 不过,这种性能可以改变.由于Lua将全局变量放在一个普通的table中,可以通过 ...

  2. MVC jsonModelBuilder

    /// <summary> /// JsonModelBinderAttribute /// author:BearLee /// 2015/5/20 11:48:40 /// </ ...

  3. Erlang OTP gen_event

    转自:http://www.myexception.cn/program/1569725.html Erlang OTP gen_event (0) 原英文文档:http://www.erlang.o ...

  4. erlang分布式编程模型

    erlang分布式编程有两种模型 一.分布式erlang 运行在可信的网络环境中 1.rpc提供的远程过程调用 rpc:call(Node,Mode,Fun,Args) ->Result|{ba ...

  5. (╭ ̄3 ̄)╭ 小希的迷宫II

    (╭ ̄3 ̄)╭ 小希的迷宫II TimeLimit: 2000/1000 MS (Java/Others)  MenoryLimit: 65536/32768 K (Java/Others) 64-b ...

  6. Activity之间的隐士跳转

    /**             * 方法一:在构造函数中指定             */            /*Intent intent=new Intent(this,TwoActivity ...

  7. redis------del命令

    删除 可以删除给定的一个或多个key; set keyname1  name1 set keyname2 name2 set keyname3 name3 del  keyname1  keyname ...

  8. android代码格式化方法小结

    转载:http://blog.csdn.net/androidzhaoxiaogang/article/details/7692526 Download the android-formatting. ...

  9. Chapter 1 First Sight——25

    "They are… very nice-looking." I struggled with the conspicuous understatement. 他们都很好看,我与轻 ...

  10. 《JS权威指南学习总结--第四章4.9.1相等和严格相等》

    内容要点:       一. 严格相等运算符"==="  首先计算其操作数的值,然后比较这两个值,比较过程没有任何类型转换:            1.如果两个值类型不同,则它们不 ...