<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. Mysql 安装(Using Generic Binaries)

    本次 Mysql 为Community 5.6.21 版本号.安装方式为通用Linux安装方式.即大多数Linux平台都能够採用该方式进行安装. 一.安装步骤 1.安装环境 1)Centos 7.0. ...

  2. 设计模式-适配器模式(Go语言描写叙述)

    在上一篇博客设计模式-策略模式(Go语言描写叙述)中我们用最简单的代码用go语言描写叙述了设计模式中的策略模式,用最简单的实例来描写叙述相信能够让刚開始学习的人能够非常轻松的掌握各种设计模式.继上篇博 ...

  3. Django之分页显示文章

    1.项目:http://www.cnblogs.com/jasonhaven/p/7493422.html 2.任务描述:页面分页显示文章 3.源代码 后台: from django.core.pag ...

  4. RSA Android加密的数据服务器上无法解密？

    一.android加密的数据服务器上无法解密? "算法/模式/填充" android的rsa加密方式是--------RSA/ECB/NoPadding或者RSA/None/NoP ...

  5. 从 BM 到 RBM

    1. 拓扑结构上 如下图示,在拓扑结构上,RBM(受限的玻尔兹曼机)与 BM(玻尔兹曼机)的最大区别在于: RBM 取消了可见层的层内连接以及隐含层的层内连接,主要在于 BM 的层内连接使得其学习过程 ...

  6. 【27.22%】【poj2991】Crane

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5772   Accepted: 1571   Special Judge D ...

  7. ［TFS4］TFS git地址，分支概念

    1)上传本地代码到TFS a.Generate Git Credentials,即创建git账户密码 b)上传本地代码 git add *git commit -m "纳入管理" ...

  8. 记录一次对接XX支付SDK过程中报错问题

    我们支付平台以前我不做对接上游的,偶然间替别人做"对接了XX支付的相关接口的工作".在工作过程中发现SDK和对外提供服务过程中很容易出问题.在此做个记录,为了以后相关工作中作为自己 ...

  9. C#编写TensorFlow人工智能应用

    C#编写TensorFlow人工智能应用 TensorFlowSharp入门使用C#编写TensorFlow人工智能应用学习. TensorFlow简单介绍 TensorFlow 是谷歌的第二代机器学 ...

  10. [转载]Android Studio卡在refreshing gradle project的原因和快速解决办法

    转载请注明出处:http://blog.csdn.net/u013005791/article/details/60143750 这个问题遇到过很多次,网上也有很多解决办法,但是好像都没有发现refr ...