<!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. pandas通过字典生成dataframe

    1.将一个字典输入: 该字典必须满足:value是一个list类型的元素,且每一个key对应的value长度都相同: (以该字典的key为columns) >>> import pa ...

  2. ural 2015 Zhenya moves from the dormitory（模拟）

    2015. Zhenya moves from the dormitory Time limit: 1.0 secondMemory limit: 64 MB After moving from hi ...

  3. 常用T-CODE ,快捷键

    RSA1 --主界面. RSA8 --后台处理数据源和层次结构,很少使用 RSRT --QUERY 测试  .输入技术名称查询即可 RSRV--分析修复BW对象 RSMO --信息包监测. 检查处理链 ...

  4. kylin_异常_01_java.io.FileNotFoundException: /developer/apache-kylin-2.3.0-bin/tomcat/conf/.keystore

    一.异常现象 kylin安装完,启动后,控制正常,kylin后台也能正常访问.但是去看kylin的日志,却发现报错了: SEVERE: Failed to load keystore type JKS ...

  5. java学习笔记 --- IO（1）

    1.File类:文件和目录(文件夹)路径名的抽象表示形式,把文件或者目录(文件夹)都封装成File对象 1.构造方法 File(String pathname):根据一个路径得到File对象 File ...

  6. Linux-压缩与解压缩命令

    常用的压缩格式:.zip   .gz   .bz2   .tar.gz   .tar.bz2 1.Zip 压缩文件:zip 压缩文件名  源文件 压缩目录:zip -r 压缩文件名 源文件 解压缩.z ...

  7. 《领域驱动设计 C# 2008 实现》 - 书摘精要

    (P2) 智能客户反模式被 Eric Evans 定义为“把所有业务逻辑放进用户界面.把系统分解成小函数,作为分离的用户界面实现,并在里面嵌入业务规则.使用关系数据库作为共享的数据仓储.使用现有的自动 ...

  8. mysql触发器与hash索引

    url查询哈希值的维护 触发器 2.1 创建表 pseudohash. 2.2 创建触发器,当对表进行插入和更新时,触发 触发器 delimiter |create trigger pseudohas ...

  9. THUSC 2017 大魔法师

    一个序列,每个物品有三个权值 $A,B,C$ 要求维护: 1.区间 $A_i+=B_i$ 2.区间 $B_i+=C_i$ 3.区间 $C_i+=A_i$ 4.区间 $A_i+=v$ 5.区间 $B_i ...

  10. Redis的一些常用命令操作

    五种 基本数据 类型 以及操作命令操作命令的网址:http://doc.redisfans.com/ 一.在可视化界面上打开命令窗口 二.打开后就是这样子 三.命令操作---查询.删除.字符串 1.k ...