<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>隔行換色</title>
<script src="http://www.xianlaiwan.cn/static/lib/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
body,
table,
td,
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.h {
background: #f3f3f3;
color: #000;
}
.c {
background: #ebebeb;
color: #000;
}
</style>
</head>
<body>
<h4>.toggleClass(className)和.toggleClass(className,switch)</h4>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td>慕課jQuery入門</td>
<td>慕課jQuery入門</td>
</tr>
<tr>
<td>慕課jQuery入門</td>
<td>慕課jQuery入門</td>
</tr>
<tr>
<td>慕課jQuery入門</td>
<td>慕課jQuery入門</td>
</tr>
<tr>
<td>慕課jQuery入門</td>
<td>慕課jQuery入門</td>
</tr>
<tr>
<td>慕課jQuery入門</td>
<td>慕課jQuery入門</td>
</tr>
</table>
</div>
<script type="text/javascript">
//給所有的tr元素加一個class="c"的樣式
$("#table tr").toggleClass("c");
</script>
<script type="text/javascript">
//給所有的偶數tr元素切換class="c"的樣式
//所有基數的樣式保留，偶數的被刪除
$("#table tr:odd").toggleClass("c");
</script>
<script type="text/javascript">
//第二個參數判斷樣式類是否應該被添加或刪除
//true，那么這個樣式類將被添加;
//false，那么這個樣式類將被移除
//所有的奇數tr元素，應該都保留class="c"樣式
$("#table tr:even").toggleClass("c", true); //這個操作沒有變化，因為樣式已經是存在的
</script>
</body>
</html>
