<!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. volatile 关键字

    就象大家更熟悉的const一样,volatile是一个类型修饰符(type specifier).它是被设计用来修饰被不同线程访问和修改的变量.如果没有volatile,基本上会导致这样的结果:要么无 ...

  2. 警惕javascript变量的全局污染问题

    作用域的概念总是和变量形影不离,它不是javascript语言独有的概念,只是其运用上与其他大型语言略有不同,JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基 ...

  3. JVM相关问答

    大部分内容来源网络,整理一下,留个底. 问:堆和栈有什么区别? 答:堆是存放对象的,但是对象内的临时变量是存在栈内存中,如例子中的methodVar是在运行期存放到栈中的. 栈是跟随线程的,有线程就有 ...

  4. 【ASP.NET 进阶】根据IP地址返回对应位置信息

    其实就是使用了百度的IP库的功能接口,然后处理下就行了,效果图如下: 准备工作: 1.注册成为开度开发者,创建应用获得百度API调用的AK秘钥,百度开发中心地址:http://developer.ba ...

  5. 【Android UI设计与开发】4.底部菜单栏（一）Fragment介绍和简单实现

    TabActivity在Android4.0以后已经被完全弃用,取而代之的是Fragment.Fragment是Android3.0新增的概念,Fragment翻译成中文是碎片的意思,不过却和Acti ...

  6. 【读书笔记《Android游戏编程之从零开始》】16.游戏开发基础（动画）

    1. Animation动画   在Android 中,系统提供了动画类 Animation ,其中又分为四种动画效果: ● AlphaAnimation:透明度渐变动画 ● ScaleAnimati ...

  7. OpenCV 之 数字图像

    1  数字图像 数字图像可看作一个数值矩阵, 其中的每个元素代表一个像素点,如下图所示: 2  存储 M行N列图像的存储位数: b = M * N * k   ( L=2k, l ∈ [0, L-1] ...

  8. HDU 5017 Ellipsoid 模拟退火第一题

    为了补这题,特意学了下模拟退火算法,感觉算法本身不是很难,就是可能降温系数,步长等参数不好设置. 具体学习可以参见: http://www.cnblogs.com/heaad/archive/2010 ...

  9. phpmyadmin后台拿shell方法总结

    方法一: CREATE TABLE `mysql`.`xiaoma` (`xiaoma1` TEXT NOT NULL ); INSERT INTO `mysql`.`xiaoma` (`xiaoma ...

  10. Quartz Cron 触发器 Cron Expression 的格式

    转自:http://blog.csdn.net/yefengmeander/article/details/5985064 上一文中提到 Cron触发器可以接受一个表达式来指定执行JOB,下面看看这个 ...