<%-- <%@ 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. vue组件父子之间相互通信案例

  2. Python3基础笔记--生成器

    目录: 一.列表生成器 二.生成器 三.迭代器 一.列表生成器 a = [x for x in range(10)] b= [y*2 for y in range(10)] def f(n) retu ...

  3. 一篇文章助你理解Python3中字符串编码问题

    前几天给大家介绍了unicode编码和utf-8编码的理论知识,以及Python2中字符串编码问题,没来得及上车的小伙伴们可以戳这篇文章:浅谈unicode编码和utf-8编码的关系和一篇文章助你理解 ...

  4. [BJWC2012]冻结 分层图最短路

    昨晚飞行路线之后,这道题就应该能一眼切了 题目当然也不难,跑一遍分层图最短路即可 Code: #include<cstring> #include<algorithm> #in ...

  5. d3的一些总结

    核心操作:https://blog.csdn.net/kriszhang/article/details/70174410 Update.Enter.Exit 简练详细说明:http://www.cn ...

  6. Vijos 1071 && caioj 1411 动态规划2：打牌 （背包方案输出）

    非常奇怪的是,我在Vijos 1071能AC,在caioj 就只有50分 可以和前面一道题一样算方案,如果大于1就是多解 然后就输出方案就好了 #include<cstdio> #incl ...

  7. vue19 组建 Vue.extend component、组件模版、动态组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Gallery滑动一页(一个Item)效果

    本文主要介绍如何使用Gallery只滑动一页以及其实现原理. Demo APK 可以方便的查看效果,在各大应用商店搜索 trinea android 下载即可,如:Google Play. 可运行代码 ...

  9. Python(六) Python 函数

    一.认识函数 help(方法名字)  help(round) 1.功能性 2.隐藏细节 3.避免编写重复的代码 4.组织代码 自定义函数 二.函数的定义及运行特点 # 递归 def sum_num(n ...

  10. WCF项目启动时错误处理

    1. 原因:启动有wcf服务的项目时,报错,是因为wcf的服务没有启动. 解决办法:启动wcf的服务端口,127.0.0:4000,错误消失.