JQuery實現table隔行變色及鼠標滑動變色

1.實例:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>jquey實現表格隔行變色及鼠標滑過變色.html</title>
		<link rel="stylesheet" href="css/font.css">
		<link rel="stylesheet" href="css/table.css">
		<script src="js/jquery-2.2.3.min.js"></script>
		<script type="text/javascript">
			$(function(){
				
				//添加tr基數背景色樣式
			      $("#title tr:even").css("background","#999");
				
				//even:設置tr基數背景色
				  $("#title tr:even").attr("bg","#999");
				
				//odd:設置tr偶數背景色
                  $("#title tr:odd").attr("bg","#fff");
				
				//mouseover():鼠標滑動事件,設置tr背景色
				  $("#title tr").mouseover(function(){
					$(this).css("background","yellow");
				  });
				//當鼠標移出tr時,設置背景色
				  $("#title tr").mouseout(function(){
				  	 //attr():獲取元素屬性
					 var bgc = $(this).attr("bg");
                     $(this).css("background",bgc);
				});
			});
		</script>
	</head>
	<body>
		  <table id="title">
			<tr>
				<td>編號</td>
				<td>姓名</td>
				<td>年齡</td>
			</tr>
			<tr>
				<td>1001</td>
				<td>jok</td>
				<td>25</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>jok</td>
				<td>25</td>
			</tr>		
			<tr>
				<td>1003</td>
				<td>jok</td>
				<td>25</td>
			</tr>
			<tr>
				<td>1004</td>
				<td>jok</td>
				<td>25</td>
			</tr>																																				
		</table>		
	</body>
</html>

2.運行效果:


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章