<!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. 算法总结之 在两个排序数组中找到第K小的数

    给定两个有序数组arr1 和 arr2 ,再给定一个int K,返回所有的数中第K小的数 要求长度如果分别为 N M,时间复杂度O(log(min{M,N}),额外空间复杂度O(1) 解决此题的方法跟 ...

  2. eclipse添加删除插件-eclipse marketplace

    源文地址:http://jingyan.baidu.com/article/cdddd41c5c883353cb00e19e.html 在有些版本的eclips上并没有eclipse marketpl ...

  3. [转载]解析 Java 类和对象的初始化过程

    原文地址:http://www.ibm.com/developerworks/cn/java/j-lo-clobj-init/index.html 由一个单态模式引出的问题谈起 类的初始化和对象初始化 ...

  4. HDU 2430 Beans （单调队列+公式化简）

    题意:给你n袋豆子,每袋都有w[i]个豆子,接着任选连续任意个袋子的豆子合在一起放入容量为p的多个袋子里(每个袋子必须放满),问剩余的豆子数<=k时,能放满最多的袋子的个数 题解:个数与p都比较 ...

  5. 安装，配置webpack.

    1.下载node.js 2.在需要用到webpack的项目下打开命令窗口运行npm init生成package.js 3.安装webpack,使用npm install webpack --save- ...

  6. JAVA中代码前加@有什么作用

    严格说@符号并未在java 语言中作为操作符使用.而是在其他附属技术中使用比如1.javadoc 文档关键字/***  @author*  @version* @since* @see*/用于自动生成 ...

  7. 五一清北学堂培训之Day 3之DP

    今天又是长者给我们讲小学题目的一天 长者的讲台上又是布满了冰红茶的一天 ---------------------------------------------------------------- ...

  8. 获得Version和Build版本号

    [[NSBundle mainBundle] infoDictionary][@"CFBundleShortVersionString"] ?: [[NSBundle mainBu ...

  9. Hive group by实现-就是word 统计

    准备数据 SELECT uid, SUM(COUNT) FROM logs GROUP BY uid; hive> SELECT * FROM logs; a 苹果 5 a 橙子 3 a 苹果 ...

  10. 2018.7.27 wireless charger TX evaluation kit based on STWBC-EP

    1 introduced 我们需要设计一个无线充电方案: 功能需求:通用的无线充电平台 参数要求:8-10W step1: 找寻资料  http://www.ti.com/sitesearch/doc ...