效果：

代码：

 <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. 使用hosts.allow和hosts.deny实现简单的防火墙

    说明:我建议学习防火墙只单一学习一种就够了,这种方式虽然简单和快速,但也有些不太灵活,所以如果要深入防火墙建议转iptables  一.背景简介 在Linux上多用iptables来限制ssh和tel ...

  2. Elasticsearch-Kibana 5.5.1插件安装

    说明:比如Elasticsearch的版本和Kibana的版本保持一致,方便排查问题.一切的安装的运行建议不要用root权限,最好是当前用户下的权限.Kibana版本变化有点快,不同的版本有不同的配置 ...

  3. FTP具有两种模式

    FTP具有两种模式,分别是port模式(也叫主动模式)和pasv模式(也叫被动模式),怎么来理解这两种模式呢?我来打个比喻吧,在主动模式下:客户端给服务器端的21端口发命令说,我要下载什么什么,并且还 ...

  4. MFC绘制棋盘格

    (1)新建立一个MFC空白的基于视类的工程 (2)在View类中重写OnPaint消息 void CMy005View::OnPaint() { CPaintDC dc(this); // devic ...

  5. ashx 下载文件

    ashx后台 byte[] file =GetFileByte(""); Response.ContentType = "application/octet-stream ...

  6. hdoj-1301-Jungle Roads【最小生成树】

    Jungle Roads Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  7. 使用CALayer实现图像镜面效果

    在iOS中,可以使用QuartzCore.framework基于CALayer做一些图像效果,不清楚CALayer,请先看这篇. 在这里我们给图像做一个简单的镜面反射效果,要学习一些图像变化的知识,首 ...

  8. iOS 使用腾讯地图显示用户位置注意事项

    1. 向 target中info 加入  NSLocationWhenInUseUsageDescription,string 类型.值是描写叙述为什么须要用户位置,这句话会出如今 提示用户是否同意a ...

  9. TestNG参数化测试Spring应用Dubbo接口

    一.配置dubbo的Bean文件: 配置spring-dubbo.xml文件: <dubbo:reference interface="com.datatrees.basisdata. ...

  10. Office WPS如何让页与页之间不相互影响

    在一个页面结束的位置点击插入-分页符,完了之后测试按回车下一页的内容有没有跟着往下跑,如果还是跟着往下跑的,再插入一次分页符,一般插入多次之后就不会跟着跑了,但是插的太多会有空白页面   测试按回车, ...