<!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. Vue 什么是组件

    Vue.js组件 组件的作用:组件是自定义元素,可扩展html元素,封装可复用的代码. 组件的注册一定要在初始化根实例之前,负责组件是不起作用的. 全局组件在初始化实例的时候被使用 局部组件仅在实例/ ...

  2. redis 按空间范围查询点位

    GEORADIUS GEORADIUS key longitude latitude radius m|km|ft|mi [WITHCOORD] [WITHDIST] [WITHHASH] [ASC| ...

  3. neutron routers HA 实验

    测试环境: 5个节点(( controller,2  network,2 compute nodes)) 采用VXLAN+Linux Bridge 1. 确定所有的neutron和nova服务都在运行 ...

  4. C#中List<object>.Clear()方法和实例化new List<object>（）操作的结果分析

    本文主要的目的是想简单的探讨一下C#中List针对内存的操作过程,以便以后遇到该种情况可以避免走进误区,内容非常简单,只是在此作为记录.能帮到人最好,帮不到就当给自己提个醒.C#将复杂的指针操作全都隐 ...

  5. hzau 1206 MathematicalGame

    1206: MathematicalGame Time Limit: 2 Sec  Memory Limit: 1280 MBSubmit: 124  Solved: 15[Submit][Statu ...

  6. uva 10739 dp

    https://vjudge.net/problem/UVA-10739 和昨天的那个回文串几乎一样只是加了条件限制,可以随意增删以及替换. #include<iostream> #inc ...

  7. vue自定义全局组件(自定义插件)

    有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用elemen ...

  8. app-前端性能测试

    前端性能测试,主要分为七个部分: 启动时间.CPU.流量.电量.内存.FPS(每秒钟的帧数).过度渲染 主要测试的内容: 启动时间:主要测试app在启动过程中的耗时情况 CPU:主要测试app在使用过 ...

  9. java学习笔记 --- 多线程（多线程的创建方式）

    1.创建多线程方式1——继承Thread类. 步骤:  A:自定义类MyThread继承Thread类.  B:MyThread类里面重写run()? 为什么是run()方法呢? C:创建对象 D:启 ...

  10. Unity自带寻路Navmesh

    自带寻路Navmesh的三大组件: 1.Nav Mesh Agent:主要挂在寻路物体上 2.Off Mesh Link:实现区域转移功能(例如,有时不一定只是在地面上进行寻路,可能有些高高的平台,平 ...