jQuery对表格进行类样式
<%-- <%@ 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对表格进行类样式的更多相关文章
- jQuery对标签、类样式、值、文档、DOM对象的操作
jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...
- jQuery 选择表格(table)里的行和列及改变简单样式
本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...
- jQuery 源码分析(十四) 数据操作模块 类样式操作 详解
jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: a ...
- js动态改变css伪类样式
首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...
- JQuery中的工具类（五）
一:1.serialize()序列表表格内容为字符串.返回值jQuery示例序列表表格内容为字符串,用于 Ajax 请求. HTML 代码:<p id="results"&g ...
- jQuery html表格排序插件：tablesorter
ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...
- jQuery----操作类样式（依托开关灯案例）
在网页开发中,元素的样式可以在style标签中定义,但是有很多案例需要添加类样式或者删除类样式,可以获取元素调用css()方法改变元素样式,但是这种方法很繁杂,本文利用开关灯案例,小结使用jquery ...
- JQuery实现表格的增加行和删除行
利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...
- jQuery所支持的css样式
jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...
随机推荐
- zzulioj--1831-- 周末出游(vector建图+dfs)
1831: 周末出游 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 22 Solved: 8 SubmitStatusWeb Board Descr ...
- PostgreSQL Replication之第四章 设置异步复制（7）
4.7 冲突管理 在PostgreSQL中,流复制数据仅在一个方向流动.XLOG由master提供给几个slave,这些slave消耗事务日志并为您提供一个较好的数据备份.您可能想知道这怎么会导致冲突 ...
- css inline-block列表布局
一.使用inline-block布局 二.多列布局方法二 <html><head> <meta charset="utf-8"> <tit ...
- 日常基础—————echo,print,print_r,var_dump的区别
1.echo 函数输出一个或多个字符串. 代码: header("Content-Type:text/html; charset=utf-8"); echo "你好” ...
- mac终端(terminal)里的快捷键
Command + K 清屏 Command + T 新建标签 Command +W 关闭当前标签页 Command + S 保存终端输出 Command + D 垂直分隔当前标签页 Command ...
- mongodb 主从
mongodb 主从 因为条件限制我们把主从放在一台服务器上面 相关参数 在启动从的时候可以增加以下参数 --autoresync 当发现从服务器的数据不是最新时,开始从主服务器请求同步数据 --sl ...
- NodeJS学习笔记 (20)错误处理-error
文章地址 https://github.com/chyingp/nodejs-learning-guide
- linux一个网卡添加多个虚IP
[root@localhost ~]# ifconfig bond0:0 10.0.0.202 netmask 255.255.255.255 broadcast 10.0.0.255 up 摘自:h ...
- 监控web服务（http，本地 / 远程监控nginx）
监控 httpd 服务一: #!/bin/bash #描述: 秒级别监控 http 服务 while [ 1 -lt 2 ] do sleep 10 ai=`netstat -ntl | grep & ...
- unity C# StackOverflowException
有时候图省事,属性这样写public int pageCount{get{return pageCount;}set{pageCount=value;}}可能会报栈溢出的错误, StackOverfl ...