<%-- <%@ 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. php7安装memcache 和 memcached 扩展

    php7安装memcache 和 memcached 扩展 标签(空格分隔): php memcache和memcached区别 memcache:http://pecl.php.net/packag ...

  2. BZOJ 1588 平衡树 模板题

    Treap: //By SiriusRen #include <cstdio> #include <algorithm> using namespace std; int si ...

  3. 使用Chrome浏览器，让我们远离（所有）广告

    你是否还在为浏览网页时各种广告霸屏而急躁不安?这里分享一个小技巧,如何自动屏蔽各大广告. 这里使用的浏览器是Chrome,直接在Chrome网上应用商店搜索下载安装AdBlock插件(不知道其它浏览器 ...

  4. 针对发起alter tablespace test begin backup 断电情况的处理

    SQL> select tablespace_name from dba_tablespaces; TABLESPACE_NAME ------------------------------ ...

  5. 范型在java中的应用

    根据泛型在java中的不同位置,大致可以分为类泛型.方法泛型和接口泛型.以下三个Demo基本展现三种泛型的用法,其中接口泛型又分两种情况描述.类泛型和方法泛型 import java.util.Arr ...

  6. c# 的类成员

    1 字段和变量的区别 字段是在类中定义的数据成员 由访问修饰符+数据类型+字段名(public string name) 字段就像类的一个小数据库,用来存放和类相关的数据; 而变量是没有修饰符的(in ...

  7. Centos7（阿里云服务器）安装Anaconda的详细步骤与心得

    在本地安装Anaconda的各个版本的文章已经很多,但是感觉不是很详细,因此,在此发发自己在Centos7(阿里云服务器)安装Anaconda的心得和步骤: 注:需要注意的地方会用不同颜色区别. 1. ...

  8. 题解 P2330 【[SCOI2005]繁忙的都市】

    又是一道Kruskal题目. AC代码见下. 主要思路就是将所有的边储存起来,然后进行贪心地选择,期间需要判断两个端点是否有关联,这一过程通过并查集实现.Kruskal部分套模板就可以了. #incl ...

  9. HBase 1.1.2 优化插入 Region预分配

    预分Region 与 不预分Region 的测试: 1 不预分Region:       23~29秒插入100W数据   并且蛋疼的是每次都写入一个 RegionServer 且  只在一个 Reg ...

  10. HBase为什么快 HBase原理。 HBase几个问题

    背景色表示可以自己做实验搞定 1 模拟一组数据 1.2.3.4.5.6.7.8.9.10     1 入 限定符 'one'     2 入 'two'     3 入 'three'     4 f ...