<%-- <%@ 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>
