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. 一把刀终极配置Win7/8版 v2.0 绿色版

    软件名称: 一把刀终极配置Win7/8版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win8 / Win7 软件大小: 1.3MB 图片预览: 软件简介: 一把刀终极配置 For Win ...

  2. mysql5.6 online ddl—索引

    尝试对mysiam表(1500万)删除索引失败 #uk表字段类型比较简单,都是int/tinyint/timestamp类型. CREATE TABLE `uk` (  `id` int(11) NO ...

  3. lua: Learning Official Doc notes

    dynamically typed vars: basic types: nil, boolean, number, string, function, userdata, thread & ...

  4. 错误: symbol lookup error: /usr/local/lib/libreadline.so.6: undefined symbol: PC

    su - root mkdir temp mv /local/ldconfig  apt-get update

  5. Android截图命令screencap

    查看帮助命令 bixiaopeng@bixiaopeng ~$ adb shell screencap -v screencap: invalid option -- v usage: screenc ...

  6. thinkphp的目录结构设计经验总结

    用thinkphp开发了好些项目了:最近准备抽空写一些经验总结: 希望能给刚开始接触tp的童鞋们提供一些开发的方案:少走一些弯路:少踩一些坑: 这些绝对都是些精华干货:耐着性子阅读:相信肯定是会有收获 ...

  7. 自定义 IP 地址

    可以在安装的时候,点击网络配置 1.修改网卡配置 编辑:vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 #描述网卡对应的设备别名,例如 ...

  8. 让你瞬间萌比的35个python小技巧

    今天在看python算法的时候,看到一篇关于python的小技巧.瞬间萌比了,原来python也可以这样玩,太神奇了.萌比的是原来这么简单的东西自己都不知道,虽然会写.废话不多说了,开始上菜. 1.拆 ...

  9. FUSE and File System

    FUSE: File system in USErspace. So what is a file system? A file system maps file paths to file cont ...

  10. 关于stringWithFormat: - 两段NSString如何合成一段

    http://blog.sina.com.cn/s/blog_6b1e4a0601019pib.html str = [NSString stringWithFormat:@"%@,%@&q ...