<%-- <%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Jquery演示示例</title>

<style type="text/css">

#tb{

border:1px solid blue;

width: 500px;

border-collapse: collapse;

cursor:point;

}

#tb td{

border:1px solid blue;

padding:3px;

}

#tb th{

background: gray;

padding: 3px;

}

.even{

background:red;

}

.over{

background: yellow;

}

</style>

 <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js'/>"></script>

 <script type="text/javascript">

   $(function(){

	   $("#td tr:odd").addClass("even");//给奇数行添加类样式

	   //分两步实现

	  /*  $("#tb tr:gt(0)").mouseover(function(){

		   //注意，这里的this对象是js-dom对象，如果想调用jQuery中的方法，得转化成JQuery中的对象

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

	   });

	   $("#tb tr:gt(0)").mouseout(function(){

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

	   }); */

	   //行云流水

	   $("#tb tr:gt(0)").mouseover(function(){

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

	   }).mouseout(function(){

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

	   });

   });

 </script>

</head>

<body>

<table id="tb">

<tr><th>姓名</th> <th>年龄</th> <th>电话</th></tr>

<tr><td>张三</td> <td>22</td> <td>13107172719893</td></tr>

<tr><td>王五</td> <td>42</td> <td>13107176587271</td></tr>

<tr><td>西欧</td> <td>32</td> <td>1310121323893</td></tr>

<tr><td>李四</td> <td>22</td> <td>13107172719893</td></tr>

</table>

</body>

</html> --%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

	pageEncoding="UTF-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>JQuery演示示例</title>

		<style type="text/css">

			#tb{

				border: 1px solid blue;

				width:500px;

				border-collapse: collapse;

				cursor:point;

			}

			#tb td{

				border: 1px solid blue;

				padding:3px;

			}

			#tb th{

				background:gray;

				padding:3px;

			}

			.even{

				background: red;

			}

			.over{

				background: yellow;

			}

		</style>

		<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js'/>"></script>

		<script type="text/javascript">

             $( function(){

            	 $("#tb tr:odd").addClass("even"); //给奇数行添加类样式

            	 /*分两步实现

            	 $("#tb tr:gt(0)").mouseover(function(){

            		 //注意，这里的this对象是js-dom对象，如果想调用jQuery中的方法，得转换成JQuery对象

            		 //alert( this instanceof $); //false

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

            	 });

            	 $("#tb tr:gt(0)").mouseout(function(){

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

            	 });

            	 */

            	 //行云流水

            	 $("#tb tr:gt(0)").mouseover(function(){

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

            	 }).mouseout(function(){

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

            	 });

             });

		</script>

	</head>

	<body>

		<table id="tb">

			<tr> <th>姓名</th> <th>年龄</th> <th>电话</th></tr>

			<tr> <td>张三</td> <td>22</td>  <td>13512345678</td>

			<tr> <td>张三</td> <td>22</td>  <td>13512345678</td>

			<tr> <td>张三</td> <td>22</td>  <td>13512345678</td>

			<tr> <td>张三</td> <td>22</td>  <td>13512345678</td>

			<tr> <td>张三</td> <td>22</td>  <td>13512345678</td>

		</table>

	</body>

</html>

　　

jQuery对表格进行类样式的更多相关文章

  1. jQuery对标签、类样式、值、文档、DOM对象的操作

    jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...

  2. jQuery 选择表格(table)里的行和列及改变简单样式

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...

  3. jQuery 源码分析(十四) 数据操作模块 类样式操作 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: a ...

  4. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  5. JQuery中的工具类（五）

    一:1.serialize()序列表表格内容为字符串.返回值jQuery示例序列表表格内容为字符串,用于 Ajax 请求. HTML 代码:<p id="results"&g ...

  6. jQuery html表格排序插件：tablesorter

    ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...

  7. jQuery----操作类样式（依托开关灯案例）

    在网页开发中,元素的样式可以在style标签中定义,但是有很多案例需要添加类样式或者删除类样式,可以获取元素调用css()方法改变元素样式,但是这种方法很繁杂,本文利用开关灯案例,小结使用jquery ...

  8. JQuery实现表格的增加行和删除行

    利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...

  9. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

随机推荐

  1. String build-in function - len

    len is a build-in function that returns the numbers of characters in a string: Since we started coun ...

  2. HDFS的底层原理

  3. SparkSQL基础

    * SparkSQL基础 起源: 1.在三四年前,Hive可以说是SQL on Hadoop的唯一选择,负责将SQL编译成可扩展的MapReduce作业.鉴于Hive的性能以及与Spark的兼容,Sh ...

  4. Python有了asyncio和aiohttp在爬虫这类型IO任务中多线程/多进程还有存在的必要吗？

    最近正在学习Python中的异步编程,看了一些博客后做了一些小测验:对比asyncio+aiohttp的爬虫和asyncio+aiohttp+concurrent.futures(线程池/进程池)在效 ...

  5. PostgreSQL Replication之第九章 与pgpool一起工作（3）

    9.3 理解pgpool的架构 一旦我们安装了pgpool,是时候来讨论软件架构了.从一个用户的角度看,pgpool就像一个 正常的数据库服务器,您可以想连接任何其他服务器一样连接到它: pgpool ...

  6. Ambari Confirm Hosts Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).

    Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).解决 Permanently added 'hdp21,192. ...

  7. Data flow diagram-数据流图

    A DFD shows what kind of information will be input to and output from the system, how the data will ...

  8. java uploadify 上传组件使用方法

    !!!声明 1-3 是jsp页面所写内容   文中需要的util  参见百度云 http://pan.baidu.com/s/1kV0gqBt   如已失效 请加QQ1940978083 1.首先引入 ...

  9. Timestamp 转 date

    Timestamp startTime = new Timestamp(new Date().getTime());

  10. caioj 1082 动态规划入门（非常规DP6：火车票）

    f[i]表示从起点到第i个车站的最小费用 f[i] = min(f[j] + dist(i, j)), j < i 动规中设置起点为0,其他为正无穷 (貌似不用开long long也可以) #i ...