jQuery对表格进行类样式

最新推荐文章于 2022-04-14 16:43:30 发布

weixin_30753873

最新推荐文章于 2022-04-14 16:43:30 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/1314wamm/p/6523247.html

版权

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

转载于:https://www.cnblogs.com/1314wamm/p/6523247.html