jQuery对表格进行类样式
2024-09-03 08:14:05
<%-- <%@ 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>
最新文章
- BZOJ 2716: [Violet 3]天使玩偶
- sizzle分析记录: 自定义伪类选择器
- 整理几篇比较好的AndroidUI动画开发文章
- Ｃ＃+ AE 注意问题汇总（不断更新）
- 小白学数据分析----->DNU/DAU
- C# Remoting的一个简单例子
- eclipse中的Console控制台视图脱离主窗口解决办法
- 【不积跬步，无以致千里】vim复制
- C++ 动态创建对象
- spring 事务 笔记3.1
- 在Windows下github展示代码
- ajaxUploadFile在IE9等IE浏览器，上传变json下载的问题解决（SpringMVC + ajaxUploadFile）
- 初识Hibernate的主配置和映射配置
- 【一天一道LeetCode】#76. Minimum Window Substring
- Python的基本语法1
- import、export 和export default區別
- call()的个人理解
- PYTHON-模块 logging hashlib
- [Linux-vi] The simple set of vi command
- hdu1564博弈+找规律