<!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. GDI学习之俄罗斯方块

    做个玩玩 public Form1() { InitializeComponent(); } #region 定义砖块int[i,j,y,x] Tricks:i为那块砖,j为状态,y为列,x为行 pr ...

  2. cxf数据压缩

    一.HTTP数据的压缩 在http协议中当content-encoding对应的值为gzip,deflate,x-gzip,x-deflate时,数据是经过了压缩之后再进行传输的.有些时候我们当我们传 ...

  3. android去掉顶部标题栏

    在清单文件(manifest.xml)里面实现 <application> <activity android:name="cn.ui.activity.UserRegAc ...

  4. 如何用js实现截取一个字符串中的数字

    比如var v ="我要提问1098";var v="我0要提问"var v="我还是要提问987"等我想要里边的 1098 ,0, 987 ...

  5. 【温故而知新-Javascript】理解 DOM

    DOM(Document Object Model,文档对象模型)允许我们用 JavaScript 来探查和操作 HTML 文档里的内容.它对于创建丰富性内容而言是必不可少的一组功能. 1. 理解文档 ...

  6. HDU 4409 Family Name List --乱搞、LCA

    题意: 给出一些名字,名字间有父子关系,有三种操作: 1.按祖先到后代,兄弟间按字典序由小到大排序,然后输出 2.求某个节点的兄弟节点有多少个,包括自己(注意,根节点的兄弟节点是1) 3.求节点a和b ...

  7. UVA 12377 Number Coding --DFS

    题意:给一串数字,第一个数是Num的话,要使后面的数字组成Num个数,而且为不降的,将这Num个数分配到9个素因子上作为指数,问能组成多少个不同的数 解法:dfs一遍,看后面的数字能组成Num个不降数 ...

  8. Unity制作FPS Demo

    等到把这个Unity FPS Demo[僵尸杀手]完成后再详细补充一下,使用Unity制作FPS游戏的经历,今天做个标识.

  9. 2D Tookit (一) 精灵切割

    Sprite Dicing 精灵切割 图一:原图 Diced 设置   Diced[切割]对比图 文档 http://www.2dtoolkit.com/docs/latest/advanced/sp ...

  10. java 12-4 StringBuffer类的替换、反转、截取功能

    1.StringBuffer的替换功能: public StringBuffer replace(int start,int end,String str):从start开始到end用str替换 pu ...