<!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. 窗体DataGridView控件中按回车键时,单元格向下移动,如何能改成向右移动

    方法一:protected override void OnKeyUp(System.Windows.Forms.KeyEventArgs e) { base.OnKeyUp(e); if (e.Ke ...

  2. 烂泥：LVM学习之逻辑卷LV及卷组扩容VG

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 上篇文章中介绍了有关LVM基础的知识,这篇文章我们来介绍如何给LVM的逻辑卷LV及卷组VG扩容. LVM的逻辑卷,我们知道它最后相当于一个分区,既然是一 ...

  3. ExtJS之开篇：我来了

    以前做web开发一直在用jquery框架,或者开发html5用到backbone.js+sea.js+underscore.js等,现在做网站后台要用到extjs了,结合spring mvc,正式学习 ...

  4. Linux root 密码重置与用户管理

    ---forget root password restart your linux system press 'e' when start. press 'e' again then choose ...

  5. NOIP2010普及组T3 接水问题 ——S.B.S.

    题目描述 学校里有一个水房,水房里一共装有 m 个龙头可供同学们打开水,每个龙头每秒钟的 供水量相等,均为 1. 现在有 n 名同学准备接水,他们的初始接水顺序已经确定.将这些同学按接水顺序从 1到 ...

  6. ios开发之CoreData使用

    1.在工程中添加build Phases的Link Binary with Libraries下添加CoreData的库. 2.在当前工程中新建文件选择CoreData——>DataModel, ...

  7. [ZZ]Sign Up for the First-Ever Appium Roadshow on August 20th in New York City

    http://sauceio.com/index.php/2014/07/appium-roadshow-nyc/?utm_source=feedly&utm_reader=feedly&am ...

  8. 第52课 C++中的抽象类和接口

    1. 什么是抽象类 (1)面向对象中的抽象概念 思考:抽象图形中,图形的面积如何计算? (2)现实中:需要知道具体的图形类型,才能求面积. (3)Shape只是一个概念上的类型,没有具体对象 2. 面 ...

  9. c# 调用打印机

    1.本地打印机 //添加引用并using System.Management; public static void AvailablePrinters() { ManagementScope ms ...

  10. WPF - MVVM - 如何将ComboBox的Selectchange事件binding到ViewModel

    转:http://www.cnblogs.com/mantian/p/3713524.html 将所有的事件,属性,都映射到ViewModel中.好处多多,以后开发尽量用这种模式. 解决方法: 使用S ...