<%-- <%@ 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. word 的使用 —— 分页符与分节符

    节的概念:节定义了一些格式, 如页边距.页面的方向.页眉和页脚,以及页码的顺序. 分节符是指为表示节的结尾插入的标记. 分节符的作用: 分节符起着分隔其前后文本格式的作用,如果删除了某个分节符,它前面 ...

  2. [JZOJ3382] [NOIP2013模拟] 七夕祭 解题报告

    Description 七夕节因牛郎织女的传说而被扣上了「情人节」的帽子.于是TYVJ今年举办了一次线下七夕祭.Vani同学今年成功邀请到了cl同学陪他来共度七夕,于是他们决定去TYVJ七夕祭游玩. ...

  3. SharePoint UserProfileService 接口列表 注解

    Remove Leader 除去领袖 Add Leader  加领袖 Get leaders  获得管理员 Get Profile Scherna Get Profile Scherna Names ...

  4. CUDA中的归约

    CUDA编程实战书中的乘方和解决办法: 对一个数组执行某种计算,然后产生一个更小的结果数组. 由一个线程在共享内存上进行迭代并计算出总和值.而如果用并行,所花时间就与数组长度的对数成正比. 代码的思想 ...

  5. Android textView开头空两格问题，排版缩进2个汉字

    一般为了排版,textView中字符段落开头一般都会空两格显示,如下图 但是如果你靠敲击空格来解决那就错了,那样在不同的屏幕上显示会差异,完美的解决方法是用转义字符”\t“,在段首加\t\t就解决.加 ...

  6. Vue.js小demo

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

  7. NodeJS学习笔记 进阶 (10)Nodejs 进阶：log4js入门实例(ok))

    个人总结:读完这篇文章讲解了log4js的使用,具体更多可以参考npmjs上看,读完这篇需要15分钟. 摘选自网络 对于线上项目用来说,日志是非常重要的一环.log4js是使用得比较多的一个日志组件, ...

  8. HAOI树上染色

    Description : 有一棵点数为 N 的树,树边有边权.给你一个在 0~ N 之内的正整数 K ,你要在这棵树中选择 K个点,将其染成黑色,并将其他 的N-K个点染成白色 . 将所有点染色后, ...

  9. Rman备份及不完全恢复操作

    最后更新时间:2018/12/18 启用归档 --检查是否为归档 SQL> archive log list; Database log mode              No Archive ...

  10. ECNUOJ 2150 完美的拯救

    完美的拯救 Time Limit:1000MS Memory Limit:65536KBTotal Submit:147 Accepted:50 Description  一只可怜的蚂蚁被万恶的魔术师 ...