jquery 표 짝짓기 줄의 색상 변화 및 마우스 이동의 하이라이트 표시 제어

1744 단어 JavaScriptjquery
		<style>
			<!--
				.even {background:#FFF38F;}
				.odd  {background:#FFFFEE;}
				.selected {background:#0099FF;}
			-->
		</style>
		<script type="text/javascript" src="jquery/jquery-1.3.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("tbody>tr:odd").addClass("odd");	//        
				$("tbody>tr:even").addClass("even");	//        
				$("tbody>tr").mouseover(function(){		//         
					$(this).addClass("selected");
				}).mouseout(function(){
					$(this).removeClass("selected");
				});
			});

		</script>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<td>  </td>
					<td>  </td>
					<td>  </td>
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td>1</td>
					<td>Tom</td>
					<td>98</td>
				</tr>

				<tr>
					<td>2</td>
					<td>Jerry</td>
					<td>67</td>
				</tr>

				<tr>
					<td>3</td>
					<td>Tony</td>
					<td>34</td>
				</tr>

				<tr>
					<td>4</td>
					<td>Steven</td>
					<td>89</td>
				</tr>
			</tbody>
		</table>
	</body>

좋은 웹페이지 즐겨찾기