<!DOCTYPE html>

<html>

	<style>

		.mousein

		{

			background-color:blue;

			cursor: pointer;

		}

		.odd

		{

	      background-color: gray;

	      cursor: pointer;

		}

	</style>

	<head>

		<meta charset="utf-8" />

		<title></title>

	</head>

	<script type="text/javascript" src="js/jquery.js" >

	</script>

	<body>

		<script>

			$(document).ready(

				function ()

				{

					//1  填充20行

					var html = "";

					for(var i=0;i<20;i++)

					{

						html += "<tr><td>"+(i+1)+"</td></tr>";

					}

					$("table").html(html);

					//2 实现隔行变色

					$("tr:odd").addClass("odd");

					$("tr:odd").mouseover(

						//当鼠标移动进去时，添加伪类

						function()

						{

							$(this).removeClass("odd");

							$(this).addClass("mousein");

						}

					);

					$("tr:odd").mouseout(

						function()

						{

							$(this).removeClass("mousein");

							$(this).addClass("odd");

						}

					);

					$("tr:odd").click(

						function()

						{

							alert("这是第"+$(this).text()+"行！");

						}

					);

				}

			);

		</script>

		<table border="1" width="50%">

		</table>

	</body>

</html>

　　

隔行变色---bai的更多相关文章

  1. jQuery知识点二 实现隔行变色

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  2. css 隔行变色，表单布局

    隔行变色: #list1 li:nth-of-type(odd){ background:#00ccff;}奇数行  #list1 li:nth-of-type(even){ background:# ...

  3. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  4. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  5. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  6. JS实现隔行变色，鼠标移入高亮

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  7. devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置（改变）显示值、固定列不移动(附源码)

    介绍一些常用的gridcontrol设置. 1.设置隔行变色.首先设置显示隔行变色,步骤:OptionsView-->EnableAppearanceEvenRow-->true和Opti ...

  8. ReportingService 通过RowNumber函数获取行号和生成隔行变色样式

    以前一直没有搞明白SSRS里面的RowNumber函数到底该怎么用,所以一直没有很好的办法在SSRS中的表格上实现隔行变色的样式,实现隔行变色的关键就是获取表格中每一行的行号.在最近了解了下这个函数, ...

  9. css选择器，用来处理隔行变色的表格

    CSS3 :nth-last-child() 选择器,可以用来处理隔行变色的表格,详情请参考网上资料.

随机推荐

  1. vim 乱码问题的方法参考

    linux 中设置当前用户的系统默认编码为 UTF-8 格式解决 vim 乱码问题的方法参考  任侠  2013-05-02 11:58  电脑基础  抢沙发  13,732 views  在使用 l ...

  2. Vue v-if条件渲染

    1.简单的v-if指令,代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  3. uva 11752 The Super Powers 素数+大数判断大小

    题目链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_proble ...

  4. nova Evacuate

    作用:当一个 node down 掉后,在新的 node 上根据其 DB 中保存的信息重新 build down node 上虚机.这个往往在虚机 HA 方案中用到.它尽可能地将原来的虚机在新的主机上 ...

  5. CSS3中与文字相关的样式

    1.给文字添加阴影:text-shadow属性(特别指出IE浏览器要IE10+的版本才支持)    语法如下: text-shadow:length length length color; 其中,第 ...

  6. 2017-02-20 注册.Net Framework4.0

    在使用IIS发布Web应用程序时,有时会遇到Asp.Net 4.0尚未在Web服务器上注册的问题,需要手动注册下.Net Framework 4.0. 注册.net Framwork4.0 步骤,以w ...

  7. 262. Trips and Users

    问题描述 解决方案 -- case when 的效率比if的效率高 -- select Trips.Request_at as 'Day', -- round(sum(case Trips.Statu ...

  8. MRC与ARC混合编程的编译器标记

    如果是MRC项目创建ARC源文件,给这个源文件加上 -fobjc-arc 的编译器标记, 如果是ARC项目创建MRC源文件,给这个源文件加上 -fno-objc-arc 的编译器标记. 步骤: 1. ...

  9. Tomcat翻译--JNDI Resources HOW-TO

    原文:http://tomcat.apache.org/tomcat-7.0-doc/jndi-resources-howto.html Introduction(介绍) Tomcat provide ...

  10. oracle for loop 简单

    declare i NUMBER; begin loop INSERT INTO emp VALUES(i,i); end LOOP; END;