效果：

代码：

 <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. 添加HP消息队列

    Date: 20140210 Auth: Jin 两台服务器 120 HTTPSQS 236 HTTPPROXY 1.add host $ jump 120 #vim /etc/hosts 192.1 ...

  2. 在MEF中实现延迟加载部件

    在MEF的宿主中,当我们通过Import声明导入的对象时,组装(Compose)的时候会创建该对象.例如: interface ILogger    {        void Log(string ...

  3. 认识udev

    转:http://www.360doc.com/content/11/0415/21/1317564_109923795.shtml 因为本身从事存储行业,在工作中多次碰到用户有这样的要求:我的lin ...

  4. 【Sets】使用Google Guava工程中Sets工具包，实现集合的并集/交集/补集/差集

    获取两个txt文档的内容~存储进集合中求集合的并集/交集/补集/差集 package com.sxd.readLines.aboutDB; import java.io.BufferedReader; ...

  5. java中copy 一个list集合的方法

    java将一个list里的数据转移到另外一个list,可以使用for语句,一次使用add方法,示例如下: ArrayList list1=new ArrayList(); list1.add(&quo ...

  6. iview2.x版本升级3.x版本icon修改清单

    当前公司使用有一个旧项目的前端组件库是iview2.x,入职以来维护该项目过程中碰到2.x版本无数的坑. 最近需求不多,闲来无事把2.x升级到3.x版本了. 新版本除了网上轻易可查到的button组件 ...

  7. rbac控制下无法创建poddisruptionbudgets

    先通过下面命令找到具体的命名空间的rbac kubectl get role --all-namespaces kubectl get role aaa -o yaml 然后倒入到yaml文件中添加 ...

  8. asset bundle打包策略

    一次引用的 不单独打包 2次的看大小 小的不单独打包 2次以上单独打包 2这个值 可以测一测 取平衡

  9. 远程访问ubuntu下mysql的问题

    ubuntu下mysql不能用IP地址远程访问的问题解决 方法1: 1.mysql>grant all privileges on *.* to 'root'@'%' identified by ...

  10. Spring框架学习（8）spring mvc上传下载

    内容源自:spring mvc上传下载 如下示例: 页面: web.xml: <?xml version="1.0" encoding="UTF-8"?& ...