<%-- <%@ 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. BZOJ 1336&1337最小圆覆盖

    思路: http://blog.csdn.net/commonc/article/details/52291822 (照着算法步骤写--) 已知三点共圆 求圆心的时候 就设一下圆心坐标(x,y) 解个 ...

  2. POJ 3122 Pie 二分答案

    题意:给你n个派,每个派都是高为一的圆柱体,把它等分成f份,每份的最大体积是多少. 思路: 明显的二分答案题-- 注意π的取值- 3.14159265359 这样才能AC,,, //By Sirius ...

  3. WebApp之H5登录注册

    代码indexhtml <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  4. CSS的flex布局和Grid布局

    一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

  5. JTable表格案例

    package com.szht.gpy.frame; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import ...

  6. WebRTC Native APIs

    WebRTC Native APIs The WebRTC Native APIs implementation is based on W3C’s WebRTC 1.0: Real-time Com ...

  7. grep常用命令讲解

    grep大家应该并不陌生,但是这个命令你确定真的会用吗?ok,接下来我通过举例子的方式,带你看清grep的本质. 首先,把/etc/password的内容复制下来命令为1.txt吧,方便操作,哈哈~ ...

  8. 紫书 例题 10-25 UVa 1363（找规律）

    可以发现余数是成一段一段的等差数列的. 在商数同的时候,余数是成首项为第一个数的余数,公差 为商数的等差数列. 利用这个性质求解即可. #include<cstdio> #include& ...

  9. web——前后端通信原理

    前端向后台传输数据: 传输方法:post  get 区别: (1)get:用于从服务器获取数据,将参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看 ...

  10. Spring Cloud学习笔记【五】Hystrix Dashboard监控面板

    ystrix除了隔离依赖服务的调用以外,Hystrix 还提供了准实时的调用监控(Hystrix Dashboard),Hystrix 会持续地记录所有通过 Hystrix 发起的请求的执行信息,并以 ...