<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>index</title>

<style type="text/css">

	#div1{width: 100px;height:100px;background: red;}

</style>

<script type="text/javascript">

window.onload = function()

{

	var oTab = document.getElementById('tab1');

	var oldColor = '';

	for(var i=0;i<oTab.tBodies[0].rows.length;i++)

	{

		oTab.tBodies[0].rows[i].onmouseover = function()

		{

			oldColor = this.style.background;

			this.style.background = "green";

		}

		oTab.tBodies[0].rows[i].onmouseout = function()

		{

			this.style.background = oldColor;

		}

		if(i%2)

		{

			oTab.tBodies[0].rows[i].style.background = 'red';

		}

		else

		{

			oTab.tBodies[0].rows[i].style.background= " ";

		}

	}

}

</script>

</head>

<body>

	<table border="1" width="300" id="tab1">

		<thead>

			<td>ID</td>

			<td>NAME</td>

			<td>AGE</td>

		</thead>

		<tbody>

			<tr>

				<td>1</td>

				<td>John</td>

				<td>27</td>

			</tr>

			<tr>

				<td>2</td>

				<td>Lucy</td>

				<td>27</td>

			</tr>

			<tr>

				<td>3</td>

				<td>Dan</td>

				<td>26</td>

			</tr>

			<tr>

				<td>4</td>

				<td>Ben</td>

				<td>30</td>

			</tr>

		</tbody>

	</table>

</body>

</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. 读书笔记——Windows核心编程（15）在应用程序中使用虚拟内存

    微软的Windows提供了三种机制对内存进行操控 1 虚拟内存(最适合管理大型对象数组或大型结构数组) 2 内存映射文件(大型数据流/文件,共享数据) 3  堆(大量的小型对象) 预订地址空间区域Vi ...

  2. Swing应用开发实战系列之三：动态信息提示窗口

    这里所说的“动态信息提示窗口”可不同于JOptionPane中的Message窗口和Confirm窗口,它们都是静态的模态的,更重要的是线程阻塞的,迫使你必须选择某个动作才能继续执行.我们接下来要分享 ...

  3. Eclipse，myeclipse开发中常用技巧总结

    一.myeclipse自带包和自己部署的包冲突解决问题方案 原来的依赖设置: 修改后的配置: 二.取消Myeclipse的自动文件验证来增加myeclipse速度 1.Windows –> Pe ...

  4. sublime生产力提升利器

    sublime 操作快捷键功能-生产力提升利器 Go to anything  ctrl+p 支持快速模糊匹配 查找替换  ctrl+h 多行游标(当只需查找/替换/选中部分相同内容时)有以下方式来产 ...

  5. python django 模板

    1 用两个大括号括起来的文字{{person_name}} 称为变量 2 被 大括号和面分号包围的文件({% if ordered_warranty %})是模板标签 3 过滤器是用管道符(|) 和U ...

  6. 【分享】iTOP-4412开发板使用之初体验[多图]

    近期入手了4412开发板,配的7寸屏和WIFI模块,GPS模块,下面晒个照片介绍一下,手机拍摄图片有点模糊,实物很精致,是我所见过最好的板子.b(￣▽￣)d 预装的Android4.0.3系统,5点以 ...

  7. java charset detector

    https://code.google.com/p/juniversalchardet/downloads/list java移植mozilla的编码自动检测库(源码为c++),准确率高. 通过svn ...

  8. 【Ext.Net学习笔记】01：在ASP.NET WebForm中使用Ext.Net

    Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...

  9. HTML5 web workes实现多线程

    对多线程来说尽量使用HTML5的WEB WORKER特性 HTML5中的Web Worker是使用多个线程并发执行Javascript程序.另外,这种特别的多线程实现能减少困惑开发者多年的,在其他平台 ...

  10. 24Spring_事务管理机制

    第一部分:Spring事务管理高层抽象接口 我们介绍三个接口:1.PlatformTransactionManager 2.TransactionDefinition  3.TransactionSt ...