1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>index</title>
  6. <style type="text/css">
  7. 	#div1{width: 100px;height:100px;background: red;}
  8. </style>
  9. <script type="text/javascript">
  10. window.onload = function()
  11. {
  12. 	var oTab = document.getElementById('tab1');
  13. 	var oldColor = '';
  14. 	for(var i=0;i<oTab.tBodies[0].rows.length;i++)
  15. 	{
  16. 		oTab.tBodies[0].rows[i].onmouseover = function()
  17. 		{
  18. 			oldColor = this.style.background;
  19. 			this.style.background = "green";
  20. 		}
  21. 		oTab.tBodies[0].rows[i].onmouseout = function()
  22. 		{
  23. 			this.style.background = oldColor;
  24. 		}
  25. 		if(i%2)
  26. 		{
  27. 			oTab.tBodies[0].rows[i].style.background = 'red';
  28. 		}
  29. 		else
  30. 		{
  31. 			oTab.tBodies[0].rows[i].style.background= " ";
  32. 		}
  33. 	}
  34. }
  35.  
  36. </script>
  37. </head>
  38. <body>
  39. 	<table border="1" width="300" id="tab1">
  40. 		<thead>
  41. 			<td>ID</td>
  42. 			<td>NAME</td>
  43. 			<td>AGE</td>
  44. 		</thead>
  45. 		<tbody>
  46. 			<tr>
  47. 				<td>1</td>
  48. 				<td>John</td>
  49. 				<td>27</td>
  50. 			</tr>
  51. 			<tr>
  52. 				<td>2</td>
  53. 				<td>Lucy</td>
  54. 				<td>27</td>
  55. 			</tr>
  56. 			<tr>
  57. 				<td>3</td>
  58. 				<td>Dan</td>
  59. 				<td>26</td>
  60. 			</tr>
  61. 			<tr>
  62. 				<td>4</td>
  63. 				<td>Ben</td>
  64. 				<td>30</td>
  65. 			</tr>
  66. 		</tbody>
  67. 	</table>
  68. </body>
  69. </html>

　　

JavaScript实例---表格隔行变色以及移入鼠标高亮的更多相关文章

  1. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  2. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  3. Javascript操作表格隔行变色

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  5. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  6. JavaScript for循环实现表格隔行变色

    本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset ...

  7. JS---案例：表格隔行变色(鼠标划过背景色恢复)

    案例:表格隔行变色(鼠标划过背景色恢复) <!DOCTYPE html> <html> <head lang="en"> <meta ch ...

  8. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  9. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

随机推荐

  1. Uploadify文件上传

    一.简介 Uploadify 是一种基于html5 或 flash的多文件上传的jQuery插件.Uploadify可以支持多种定制.它是一种异步的文件上传插件.下载网站为http://www.upl ...

  2. 在Myeclipse中添加User Library,用户自己的库

    在Myeclipse中添加User Library,用户自己的库 作用:可以将常用的jar包添加到一个固定的库中,避免每一次都要手动导入. 步骤: 1.选择项目,点击Myeclipse的window菜 ...

  3. (转载)web测试方法总结

    web测试方法总结 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#￥%……&*?[]{}”特别要注意单引号和&符号.禁止直 ...

  4. django安装和卸载

    一.pip安装 安装: apt-get update apt-get install python-pip pip install django==1.4.20 卸载: pip uninstall d ...

  5. CEPH块设备创建及快照

    1.创建image rbd create foo --size 1024 {--image-format 2}//创建一个名为foo的image,大小为1024M,当需要克隆快照时,需要添加大括号中的 ...

  6. 【MVC 4】7.SportsSore：完成购物车

    作者:[美]Adam Freeman      来源:<精通ASP.NET MVC 4> 本文将继续构建 SportsStore 示例应用程序.在上一章中,添加了对购物车的基本支持,现在打 ...

  7. 一致性哈希算法学习及JAVA代码实现分析

    1,对于待存储的海量数据,如何将它们分配到各个机器中去?---数据分片与路由 当数据量很大时,通过改善单机硬件资源的纵向扩充方式来存储数据变得越来越不适用,而通过增加机器数目来获得水平横向扩展的方式则 ...

  8. [ZZ]最小化不可重现的bug

    http://testerhome.com/topics/577 原文请见 Minimizing Unreproducible Bugs 不能重现的 bug 是我的灾难.我常常找到一个bug 后来又听 ...

  9. 页面分享代码share

    在开发一个页面的时候常常会有这么一个小功能,就是分享该页面中的信息. 常见的分享代码有百度分享,JiaThis分享插件,bshare分享插件等,我主要分享一下自定义分享代码,如下: function ...

  10. MySQL数据库学习笔记（二）----MySQL数据类型

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...