<head>
    <title></title>
    <script type="text/javascript">
        onload = function () {

            document.getElementById('btn').onclick = function () {
                //这个是获取这个页面中所有的tr
                // var trs= document.getElementsByTagName('tr');
                //获取指定的表中的tr
                var trs = document.getElementById('tb').getElementsByTagName('tr');
                for (var i = 0; i < trs.length; i++) {
                    if (i % 2 == 0) {
                        trs[i].style.backgroundColor = '';//默认颜色
                    } else {
                        trs[i].style.backgroundColor = 'yellow';
                    }
                }
            };
        };
    
    </script>
</head>
<body>
    <input type="button" name="name" value="表格隔行变色" id="btn" />
    <table border="1" id="tb">
        <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
    </table>
</body>

JS表格各行变色的更多相关文章

  1. html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. JS实现表格隔行变色

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

  3. JavaScript 实现表格隔行变色

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

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

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

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

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

  6. Javascript操作表格隔行变色

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

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

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

  8. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  9. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

随机推荐

  1. 编译Android下可用的FFmpeg+x264

    编译Android下可用的FFmpeg+x264 编译x264: 下载最新版的x264 ftp://ftp.videolan.org/pub/videolan/x264/snapshots/ 1.解压 ...

  2. SpringCloud微服务框架搭建

    一.微服务架构 1.1什么是分布式 不同模块部署在不同服务器上 作用:分布式解决网站高并发带来问题 1.2什么是集群 多台服务器部署相同应用构成一个集群 作用:通过负载均衡设备共同对外提供服务 1.3 ...

  3. 【t053】整数去位

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 键盘输入一个高精度的正整数N,去掉其中任意M个数字后剩下的数字按原左右次序将组成一个新的正整数.编程对 ...

  4. 【30.49%】【codeforces 569A】Music

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  5. listener监听器笔记

    listener:三个域对象的监听器,,还有属性的变化. 监听三个域对象的创建和销毁:servletContextListenerservletRequestListenerservletsessio ...

  6. erlang分布式入门（一）-ping pong

    erlang分布式入门(一)-ping pong 测试环境和http://willvvv.iteye.com/blog/1523918 一样,192.168.0.182(centos-182)和192 ...

  7. erlang应用发布

    http://blog.csdn.net/zhangxinrun/article/details/6993892 参考“转载1”和“转载2”就可以了,但需要注意以下两点: 1.如果用rebar - c ...

  8. Android Studio入门（安装-->开发调试）

    写在前面的话:本文来源:http://blog.csdn.net/yanbober/article/details/45306483 目标:Android Studio新手–>下载安装配置–&g ...

  9. Python采用struct处理二进制

    有时需要使用python二进制数据,实例,件.socket操作时.这时候.能够使用python的struct模块来完毕.能够用 struct来处理c语言中的结构体. struct模块中最重要的三个函数 ...

  10. TEdit,TMemo背景透明（SetWindowLong(WS_EX_TRANSPARENT)增加透明风格）

    The component below works perfectly, except for the following problem: 1) Saves the component below ...