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. 请问如何查询一个APP的Android和iOS下载量?

    作者:Jasmine Jiang链接:http://www.zhihu.com/question/28533067/answer/87871598来源:知乎著作权归作者所有,转载请联系作者获得授权. ...

  2. javascript动画效果之匀速运动

    html和css写在一起方便看,div通过定位设置为-200隐藏,span也是通过定位定在div靠左的中间 <!DOCTYPE html> <html> <head> ...

  3. Javascript的精华

    一.语法 JS只有一个数字类型,64位浮点数,所以1和1.0是相同的.为什么这么设计:防止短整型的溢出. 二.对象 1.通常将一个对象的值赋给另一个变量的赋值方法 if(car.name!=null) ...

  4. WPF类层次结构

    WPF类层次结构 System.Threading.DispatcherObject类 WPF应用程序使用STA(Single Thread Affinity)模型,整个用户界面由一个单独的线程拥有, ...

  5. webservice简介及客户端搭建

    在环境变量中,CLASSPATH添加D:\apache-cxf-2.4.2\lib 新建CXF_HOME   D:\apache-cxf-2.4.2 在PATH中添加   D:\apache-cxf- ...

  6. Centos6.6升级python版本

    centos原生python为2.6.6,可以通过下面的命令查看 #python -V Python 注:在安装新版本前,请先安装zlib\openssl组件,如果你确认你用不到这个,也可以不装 需要 ...

  7. Android.mk简单分析

    LOCAL_PATH:= $(call my-dir) include $(CLEAR_VARS) LOCAL_MODULE_TAGS := optional LOCAL_SRC_FILES := $ ...

  8. C#获取键盘和鼠标操作的时间的类

    /// /// 创建结构体用于返回捕获时间 /// [StructLayout(LayoutKind.Sequential)] struct LASTINPUTINFO { /// /// 设置结构体 ...

  9. Fine Uploader 简单配置方法

    由于jquery.uploadify是基于flash的jquery上传控件,客户老是说出问题,所以今天换成了一个纯js的异步上传控件. 这方面的资料很少,故此记下来分享一下. 项目地址:Fine Up ...

  10. C++ 中 const和define的区别

    来源网址:http://wujiangping.blog.163.com/blog/static/195182011201255115125205/ 请区别用#define命令定义的符号常量和用con ...