1. 程式人生 > >製作隔行變色的表格

製作隔行變色的表格

程式碼和包 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>製作隔行變色的表格</title>

		<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
		
		<script type="text/javascript">
					$(function(){
			$("tr:odd").css("background-color","#FFDEAD");
			$("tr:even").css("background-color","#FFEFD5");
			$("tr:first").css("background-color","#D2B48C");
			$("tr:last").css("background-color","#D2B48C");
		})
		</script>
	</head>

	<body>
		<table>
			<tr>
				<td>第一排</td>
				<td>第一排</td>
				<td>第一排</td>
				<td>第一排</td>
				<td>第一排</td>
			</tr>
			<tr>
				<td>第二排</td>
				<td>第二排</td>
				<td>第二排</td>
				<td>第二排</td>
				<td>第二排</td>
			</tr>
			<tr>
				<td>第三排</td>
				<td>第三排</td>
				<td>第三排</td>
				<td>第三排</td>
				<td>第三排</td>
			</tr>
			<tr>
				<td>第四排</td>
				<td>第四排</td>
				<td>第四排</td>
				<td>第四排</td>
				<td>第四排</td>
			</tr>
			<tr>
				<td>第五排</td>
				<td>第五排</td>
				<td>第五排</td>
				<td>第五排</td>
				<td>第五排</td>
			</tr>
			<tr>
				<td>第六排</td>
				<td>第六排</td>
				<td>第六排</td>
				<td>第六排</td>
				<td>第六排</td>
			</tr>
			<tr>
				<td>第七排</td>
				<td>第七排</td>
				<td>第七排</td>
				<td>第七排</td>
				<td>第七排</td>
			</tr>
			<tr>
				<td>第八排</td>
				<td>第八排</td>
				<td>第八排</td>
				<td>第八排</td>
				<td>第八排</td>
			</tr>
			<tr>
				<td>第九排</td>
				<td>第九排</td>
				<td>第九排</td>
				<td>第九排</td>
				<td>第九排</td>
			</tr>
		</table>

	</body>

</html>