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. 关于Mongdb的java的CRUD操作

    package mongodb; import java.net.UnknownHostException;import java.util.List; import com.mongodb.Basi ...

  2. Objective-C中关于请求返回NSData数据解析成NSDictionary或NSArray的方法

    1.如果后台返回的是字典或数组的data型,直接使用以下方法转换: { // Data 转成 字典 其中responseObject为返回的data数据 NSDictionary *resultDic ...

  3. nginx: 响应体太大

    如果做proxy,可以将proxy配置修改buffer长度,或者直接关闭buffer.http { proxy_buffer_size 128k; proxy_buffers 4 256k; prox ...

  4. web上传大文件的配置

    1.项目本身的webconfig  在<system.web>字段下 <httpRuntime targetFramework="4.5" requestLeng ...

  5. 关于oracle数据库(4)数据类型

    数据类型 字符数据类型char:固定长度字符串,最大可以存放2000字节 字符串varchar2:可变长度字符串,最大可以存放2GB数值类型数据 数字number:可以存放整数.浮点数.实数 numb ...

  6. Brackets + Sass 学习心得

    大家知道Brackets是一个可以实时浏览html页面修改效果的工具,对于前段开发人员应该不会陌生,有了它,布局页面再也不是什么困难了, 目前为止已经更新到1.6了. 下载最新版可以到官方网: htt ...

  7. 线程池Executors探究

    线程池用到的类在java.util.concurrent包下,核心类是Executors,通过其不同的几个方法可产生不同的线程池. 1.生成固定大小的线程池 public static Executo ...

  8. do循环的100米自由落体

    #include "stdio.h" void main() { float h=100.0,sum=100.0; ; do { sum=sum+h; h=h/; g++; }); ...

  9. hdu_5795_A Simple Nim(打表找规律的博弈)

    题目链接:hdu_5795_A Simple Nim 题意: 有N堆石子,你可以取每堆的1-m个,也可以将这堆石子分成3堆,问你先手输还是赢 题解: 打表找规律可得: sg[0]=0 当x=8k+7时 ...

  10. LeetCode OJ 105. Construct Binary Tree from Preorder and Inorder Traversal

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...