效果:

代码:

 <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. PHP温故知新(二)

    2.安装和配置 安装这里要注意两点,是之前没有在意的: 1.将php.ini文件中的 cgi.fix_pathinfo设置为0 设置为0是为了解决一个安全漏洞,假如我们现在有这样一个URL:http: ...

  2. 邮件发送过去24小时的自增长事件(MSSQL)

    此脚本需要启用DBMail以支持邮件的发送.可设为每日运行的JOB以追踪自增长事件,以便做出适当的调整. -- Email the Auto-growth events that have occur ...

  3. Font Include Sass Mixin

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 前期以前给大家介绍过一个使用google font的mixin(详见<Google Fonts Sass Mixin>),今 ...

  4. 利用require.js实现javascript模块化加载

    这种引入很看到很想死吧! <script src="1.js"></script> <script src="2.js">& ...

  5. 关于DeploymentConfig的思考

    为什么是deploymentconfig而不是Kubernetes的deployment 在new-app的时候openshift直接创建了一个deploymentconfig并部署成rc,开始并不理 ...

  6. CKFinder根据用户设置权限,不同用户有自己的私有的、独立的文件夹

    CKFinder 默认情况下多个用户共用同一个图片目录.所有上传的图片和Flash全部保存在同一个文件夹(默认为 userfiles)内.     现在想实现:     第1个需求:不同用户有自己的私 ...

  7. iOS:第三方框架MJPhotoBrowser图片浏览器的使用

    介绍:MJPhotoBrowser这个第三方库是MJ老师封装的一套用来浏览图片的浏览器,可是是本地图片.网络图片.gif图片等,其也依赖了SDWebImage.SVProgressHUD.YLGIFI ...

  8. 教你用 google-drive-ocamlfuse 在 Linux 上挂载 Google Drive

    如果你在找一个方便的方式在 Linux 机器上挂载你的 Google Drive 文件夹, Jack Wallen 将教你怎么使用 google-drive-ocamlfuse 来挂载 Google ...

  9. (转)IntelliJ IDEA下的使用git

    1.git简介 Git是目前流行的分布式版本管理系统.它拥有两套版本库,本地库和远程库,在不进行合并和删除之类的操作时这两套版本库互不影响.也因此其近乎所有的操作都是本地执行,所以在断网的情况下任然可 ...

  10. 屏幕录像大师如何把LXE文件转换为EXE文件

    EXE 和 LXE 实际上是同一种格式,文件大小完全相同,可以快速相互转换.区别是EXE复制到其它电脑上可以直接播放,LXE需要播放器播放,我们提供LXE播放器,而且是完全免费的.EXE的好处是复制到 ...