<!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. 开机启动顺序rc.local与chkconfig的不同

    /etc/rc.local文件有如下两行/etc/init.d/mysql start/etc/init.d/keepalived start /etc/rc.local是按脚本的顺序一个启动后启动下 ...

  2. 【bzoj5085】最大（二分+乱搞）

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=5085 这道题我们可以先二分答案,然后转化为判定是否有四角权值>=mid的矩形. ...

  3. processing学习整理---Image

      1.Load and Display(加载与显示) Images can be loaded and displayed to the screen at their actual size or ...

  4. Centos7 docker容器 搭建

    Dockerfile 文件如下: # # MAINTAINER Carson,C.J.Zeong <zcy@nicescale.com> # DOCKER-VERSION # # Dock ...

  5. 汇编笔记 CALL（1）

    assume cs:code code segment start: mov ax, ;将AX通用寄存器设0 call s inc ax s: pop ax ;将数据从桟中取出 code ends e ...

  6. Dom4j quick start guide

    Parsing XML Using Iterators Powerful Navigation with XPath Fast Looping Creating a new XML document ...

  7. QT 使用QSettings读写ini配置文件

    利用Qsettings包一个类 RWIniFile, writeIni方法写文件, readIni方法读文件 rwinifile.h #ifndef RWINIFILE_H #define RWINI ...

  8. Python之Django总结

    一.Django 总结django知识点   一.视图函数:     请求对象-----------request:           1.HttpRequest.body:         请求原 ...

  9. read_excel

    read_excel默认把第一行作为各个列名, 用headers＝None,读取表时,可以让第一行不为列名. 而不是names,col之类的参数

  10. java之 Timer 类的简单使用案例

              (如果您看到本文章务必看结尾!) 第一次用Timer类,记录一下个人理解. 场景:做苹果内容结果验证时,根据苹果支付凭证去苹果官方服务器验证是否支付成功.但因为苹果服务器比较慢,第 ...