开始学习jQuery了,准备在博客上记录下来,就当做备忘!
表格隔行换色
HTML代码
<html>
<head>
<title>jQuery学习 第一部分</title>
<style type="text/css">
table{
border-collapse:collapse;
border-color: #7c7b81;
}
.odd{
background-color: #CFD0D4;
}
</style>
</head>
<body>
<table id="userTable" align="center" border="1">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>角色</th>
<th>创建日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>admin</td>
<td>系统管理员</td>
<td>2010-09-08</td>
</tr>
<tr>
<td>1</td>
<td>admin</td>
<td>系统管理员</td>
<td>2010-09-08</td>
</tr>
<tr>
<td>1</td>
<td>admin</td>
<td>系统管理员</td>
<td>2010-09-08</td>
</tr>
<tr>
<td>1</td>
<td>admin</td>
<td>系统管理员</td>
<td>2010-09-08</td>
</tr>
<tr>
<td>1</td>
<td>admin</td>
<td>系统管理员</td>
<td>2010-09-08</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#userTable tbody tr:odd").addClass("odd");
});
</script>
</body>
</html>
效果截图: