jQuery制作双色表格

久梦歌行

于 2014-08-26 23:33:53 发布

阅读量907

点赞数

分类专栏： jquery 文章标签： jquery

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".stripe tr").mouseover(function(){
		$(this).addClass("over");
	}).mouseout(function(){
		$(this).removeClass("over");
	})
	$(".stripe tr:even").addClass("alt");
})
</script>

<style>
th{
	background:#0066FF;
	color:#FFFFFF;
	line-height:20px;
	height:30px;
}
td {
	padding:6px 11px;
	border-bottom:1px solid #95bce2;
	vertical-align:top;
	text-align:center;
}

td*{
	padding:6px 11px;
}

tr.alt td{
	background:#ecf6fc;
}

tr.over td{
	background:#bcd4ec;
}
</style>
</head>

<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<thead>
	<tr>
		<th>姓名</th>
		<th>年龄</th>
		<th>QQ</th>
		<th>Email</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>zhangming</td>
		<td>11</td>
		<td>1234</td>
		<td>qwer</td>	
	</tr>
	<tr>
		<td>zhangming</td>
		<td>11</td>
		<td>1234</td>
		<td>qwer</td>	
	</tr>
	<tr>
		<td>zhangming</td>
		<td>11</td>
		<td>1234</td>
		<td>qwer</td>	
	</tr>
	<tr>
		<td>zhangming</td>
		<td>11</td>
		<td>1234</td>
		<td>qwer</td>	
	</tr>
	<tr>
		<td>zhangming</td>
		<td>11</td>
		<td>1234</td>
		<td>qwer</td>	
	</tr>
	<tr>
		<td>zhangming</td>
		<td>11</td>
		<td>1234</td>
		<td>qwer</td>	
	</tr>
</tbody>
</table>
<p>哈哈</p>
</body>
</html>