<!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. 如何解决分布式系统数据事务一致性问题（HBase加Solr）

    如何解决分布式系统数据事务一致性问题 (HBase加Solr) 摘要:对于所有的分布式系统,我想事务一致性问题是极其非常重要的问题,因为它直接影响到系统的可用性.本文以下所述所要解决的问题是:对于入H ...

  2. html,datepicker，datetimepicker时间控件使用

    1.My97DatePicker 传送门:点击打开链接 ps:My97DatePicker貌似对chrom不兼容 2.jquery日期选择/日历 http://www.oschina.net/proj ...

  3. Bash Shell read file line by line and substring

    #read one file line by line for line in $(cat test1.txt); do echo $line ; done; #while read split li ...

  4. [转]ionic $state.go passed $stateParams

    本文转自:http://stackoverflow.com/questions/19516771/state-go-toparams-not-passed-to-stateparams If you ...

  5. Linux 系统常用命令汇总（四） 程序和资源管理

    程序和资源管理 分类 命令 选项 注解 背景管理 & command+& 将任务放到后台进行 ctrl+z 暂停任务 fg [%number] 讲后台程序推到前台来,number表示进 ...

  6. MATLAB基本命令

    eye(n)创建n阶单位矩阵 zeros(n)创建n阶0方阵 rand(m,n)创建m*n阶元素为从0到1的均匀分布的随机数矩阵 round(A)对矩阵A中所有元素进行四舍五入运算 A^-1用幂运算求 ...

  7. java7-3 继承

    1.继承概述: 把多个类中相同的内容给提取出来定义到一个类中. 如何实现继承呢? Java提供了关键字:extends 格式: class 子类名 extends 父类名 {} 父类也称为基类.超类: ...

  8. java 12-1 StringBuffer类

    线程安全(多线程讲解) 安全 -- 同步 -- 数据是安全的--效率低一些 不安全 -- 不同步 -- 数据不安全--效率高一些 安全和效率问题是永远困扰我们的问题. 安全:医院的网站,银行网站 效率 ...

  9. Android应用程序签名详解 简介

    转自: http://blog.csdn.net/lyq8479/article/details/6401093 本文主要讲解Android应用程序签名相关的理论知识,包括:什么是签名.为什么要给应用 ...

  10. Android优化——UI优化（二） 使用include标签复用布局

    使用include标签复用布局 - 1.include标签的作用 假如说我下图的这个布局在很多界面都用到了,我该怎么办?每个页面都写一遍的话,代码太冗余,并且维护难度加大. <LinearLay ...