点滴积累【JS】---JS小功能（列表页面隔行变色）
效果：
代码：
<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小功能（列表页面隔行变色）的更多相关文章
- JSP中列表展示,隔行变色以及S标签的使用
1.java代码 /** * 列表展示,隔行变色以及S标签的使用 * * @return */ public String list() { List<User> list = new A ...
- JS类小功能
工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...
- HTML系列：js和css多种方式实现隔行变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)
效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...
- 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)
效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...
- 点滴积累【JS】---JS小功能（JS实现匀速运动）
效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: <head runat="server"> ...
- 点滴积累【JS】---JS小功能（createElement和insertBefore添加div下面的节点）
效果: 代码: <head runat="server"> <title></title> <script type="text ...
- 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）
效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...
- 点滴积累【JS】---JS小功能（onmousemove鼠标移动坐标接龙DIV)
效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: <head runat="server"> ...
随机推荐
- [51nod1357]密码锁 暨 GDOI2018d1t2
有一个密码锁,其有N位,每一位可以是一个0~9的数字,开启密码锁需要将锁上每一位数字转到解锁密码一致.这个类似你旅行用的行李箱上的密码锁,密码锁的每一位其实是一个圆形转盘,上面依次标了0,1,...9 ...
- EF 通用数据层类
EF 通用数据层父类方法小结 转载:http://www.cnblogs.com/yq-Hua/p/4165344.html MSSql 数据库 数据层 父类 增删改查: using System; ...
- Visual Studio自动生成XML类和JSON类
Visual Studio 2013及以上版本提供了一个非常实用的功能.可以根据xml文档或json文档自动生成类.有了这个工具反序列化时就不用再手动写类并且实现了强类型操作. 步骤 1. 准备一份j ...
- 基于tiny4412的Linux内核移植 -- PWM子系统学习（七）
作者信息 作者: 彭东林 邮箱:pengdonglin137@163.com QQ:405728433 平台简介 开发板:tiny4412ADK + S700 + 4GB Flash 要移植的内核版本 ...
- ScheduledExecutorService run方法要加入try catch
原文:http://www.andyqian.com/2018/03/07/java/javaSmallDetail/ 前言 今天我们一起来做个简单有趣的实验.熟悉Java的童鞋,对Scheduled ...
- redis节点管理-新增从节点
原文:http://blog.sina.com.cn/s/blog_53b45c4d0102wg12.html 新增从节点 新增一个节点7008节点,使用add-node --slave命令. [pl ...
- pytho文件命名不要内部模块或者引用模块名字相同
自己写的包和模块,注意命名不要和python内置模块和包.以及引用的模块和包名字冲突
- 推断是否是有效的IP地址
#include<stdio.h> #include<string.h> bool isValidIp(char *s) { int len=strlen(s); int i= ...
- 【云计算】CloudFoundry参考资料
开源PaaS平台 Cloud Foundry:http://www.oschina.net/p/cloud+foundry/ 详解CloudFoundry中各个组件的作用:http://www.cst ...
- （转）Akka学习笔记
Akka学习笔记系列文章: <Akka学习笔记:ACTORS介绍> <Akka学习笔记:Actor消息传递(1)> <Akka学习笔记:Actor消息传递(2)> ...