效果：

代码：

 <head runat="server">

     <title></title>

     <script type="text/javascript">

         window.onload = function () {

             var otab = document.getElementById('tab1');

             var thiscolor = '';

             for (var i = 0; i < otab.tBodies[0].rows.length; i++) {

                 otab.tBodies[0].rows[i].onmouseover = function () {

                     thiscolor = this.style.background;

                     this.style.background = '#00FFFF';

                 };

                 otab.tBodies[0].rows[i].onmouseout = function () {

                     this.style.background = thiscolor;

                 };

                 if (i % 2) {

                     otab.tBodies[0].rows[i].style.background = '';

                 }

                 else {

                     otab.tBodies[0].rows[i].style.background = '#FFFF00';

                 }

             }

         };

     </script>

 </head>

 <body>

     <table id="tab1" border="1" style="text-align: center; width: 500px; margin: 200px auto">

         <thead>

             <tr style="background-color: #FF0000">

                 <td>

                     种族名称

                 </td>

                 <td>

                     种族简称

                 </td>

                 <td>

                     英雄

                 </td>

             </tr>

         </thead>

         <tbody>

             <tr>

                 <td>

                     人类联盟

                 </td>

                 <td>

                     HUM

                 </td>

                 <td>

                     代表性英雄：AM

                 </td>

             </tr>

             <tr>

                 <td>

                     兽人部落

                 </td>

                 <td>

                     ORC

                 </td>

                 <td>

                     代表性英雄：BM

                 </td>

             </tr>

             <tr>

                 <td>

                     不死亡灵

                 </td>

                 <td>

                     UD

                 </td>

                 <td>

                     代表性英雄：DK

                 </td>

             </tr>

             <tr>

                 <td>

                     暗夜精灵

                 </td>

                 <td>

                     NE

                 </td>

                 <td>

                     代表性英雄：DH

                 </td>

             </tr>

         </tbody>

     </table>

 </body>

点滴积累【JS】---JS小功能（列表页面隔行变色）的更多相关文章

  1. JSP中列表展示,隔行变色以及S标签的使用

    1.java代码 /** * 列表展示,隔行变色以及S标签的使用 * * @return */ public String list() { List<User> list = new A ...

  2. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  3. HTML系列：js和css多种方式实现隔行变色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  5. 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  6. 点滴积累【JS】---JS小功能（JS实现匀速运动）

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: <head runat="server"> ...

  7. 点滴积累【JS】---JS小功能（createElement和insertBefore添加div下面的节点）

    效果: 代码: <head runat="server"> <title></title> <script type="text ...

  8. 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）

    效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...

  9. 点滴积累【JS】---JS小功能（onmousemove鼠标移动坐标接龙DIV)

    效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: <head runat="server"> ...

随机推荐

  1. fedora19/opensuse13.1 配置openvpn client

    Date: 20140207Auth: Jin 1.install # yum -y install openvpn #zypper install openvpn 2.copy user key # ...

  2. 基于t-io的MI工具实现

    原文:https://my.oschina.net/u/2984386/blog/1630300 背景介绍 t-io是一款国产开源的网络编程框架,主要是特点:简单,易上手,AIP封装通俗易懂,适合一般 ...

  3. [Android实例] 最全的Android开发资源整理--进阶必备

    本帖最后由 一切随枫 于 2014-6-9 12:08 编辑 原文链接: http://stormzhang.github.io/android/2014/06/05/android-awesome- ...

  4. 如何在windows下的Python开发工具IDLE里安装其他模块

    以安装Httplib2模块为例 1 下载模块 到 “https://code.google.com/p/httplib2/” 下载一款适合你的压缩包“httplib2-0.4.0.zip” 2 解压下 ...

  5. 使用神经网络识别手写数字Using neural nets to recognize handwritten digits

    The human visual system is one of the wonders of the world. Consider the following sequence of handw ...

  6. 深度增强学习--DPPO

    PPO DPPO介绍 PPO实现 代码DPPO

  7. cannot be cast to javax.servlet.Filter 报错, 原因servlet-api.jar冲突

    使用maven开发web应用程序, 启动的时候报错: jar not loaded. See Servlet Spec 2.3, section 9.7.2. Offending class: jav ...

  8. Spark Streaming资源动态分配和动态控制消费速率

    本篇从二个方面讲解: 高级特性: 1.Spark Streaming资源动态分配 2.Spark Streaming动态控制消费速率 原理剖析,动态控制消费速率其后面存在一套理论,资源动态分配也有一套 ...

  9. Cocos2d-x中点九图(Scale9Sprite)创建图片按钮

    1. 配置引擎根目录支持 C/C++->常规->附加包含目录->增加->$(EngineRoot) 2. 引入头文件 #include "cocos-ext.h&qu ...

  10. ASP.NET MVC & Web API Brief Introduction

    Pure Web Service(ASMX): Starting back in 2002 with the original release of .NET, a developer could f ...