点滴积累【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"> ...
随机推荐
- [典型漏洞分享]YS的防暴力破解设计存在缺陷
YS使用的防暴力破解机制存在缺陷,该缺陷可被用于暴力破解其它用户密码[高] 问题描述: YS在用户登录页面设置了验证码机制,当用户输入密码错误次数达到3次时,再次登录需要验证码以防止攻击者进行暴力破解 ...
- 几本推荐的Java书
一.<深入理解Java虚拟机:JVM高级特性与最佳实践> 如果你不满足于做一个只会写if…else…的Java程序员,而是希望更进一步,我随便举几个例子吧: 1.了解Java代码的底层运行 ...
- 【mysql】新方法修改数据库密码以及解决--ERROR 1045 (28000)的问题
之前 有写过一篇修改mysql数据库的密码的一篇随笔, 地址是:http://www.cnblogs.com/sxdcgaq8080/p/5667124.html 但是此次采用原本的老方法,出现了问题 ...
- JAVA项目如何打开，打开乱码怎么办，字体太小怎么办，感叹号是什么情况
打开java项目 Finish 汉字乱码改这里 字体大小改在第一个的 Appearance里面 项目前面有感叹号,都是tomcat和jdk配置有问题
- easyui-combobox绑定回车事件注意事项
回车事件的定义的位置必须是easyui-combobox数据加载的后面,才有效果. HTML文件: <select id="aucBrandNo" class="e ...
- 九.Spring Boot JPAHibernateSpring Data
1.项目结构 2.导入jar包 <!-- 添加Spring-data-jpa依赖. --> <dependency> <groupId>org.springfram ...
- 【特别好】【位运算】maximum-xor-of-two-numbers-in-an-array
https://leetcode.com/problems/maximum-xor-of-two-numbers-in-an-array/ 利用了异或的”自反性“: a ^ b = c,而a ^ b ...
- jquery中获取相邻元素相关的命令：next()、prev()和siblings()
jquery里我们要获取某个元素的相邻元素时,可以用到的命令有三个: next():用来获取下一个同辈元素. prev():用来获取上一个同辈元素. siblings():用来获取所有的同辈元素. 下 ...
- 爪哇国新游记之十三----XML文件读写
/** * XML读写示例 * @author hx * */ public class XmlReaderWriter{ /** * 读取一个XML文件,返回一个雇员链表 * @param file ...
- activemq两种实现方式
第一种:点对点 #发布者public class Producer { private static final String userName = ActiveMQXAConnectionFacto ...