<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行变色测试_www.jb200.com</title>
<style>
* {
font-family: 'MICROSOFT YAHEI';
margin: 0;
padding: 0;
}
#oddDiv,#oddNotThDiv,#per2Div,#per3Div {
width: 900px;
margin: 3px auto;
padding: 15px 10px;
text-align: center;
border: 1px solid #bdf3d4;
text-align: center;
}
table {
width: 100%;
}
.odd {
background: #cbf5fb;
}
.even {
background: #f4f4f4;
}
.hover {
background: #bdf3d4;
color: #FFFFFF;
}
#oddNotThDiv table tr th,#per2Div table tr th,#per3Div table tr th {
background: #fad8be;
}
</style>
<script type="text/
javascript" src="../../js/jquery-2.1.0.js"></script>
<script>
$(function() {
$("#oddDiv tr:odd").addClass("odd");//奇数
$("#oddDiv tr:even").addClass("even");
$("#oddDiv tr").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
$("#oddNotThDiv tr:not(:has(th)):odd").addClass("odd");
$("#oddNotThDiv tr:not(:has(th)):even").addClass("even");
$('#per2Div table tr:not(:has(th))').addClass(function(i) {
return i % 3 == 0 ? "odd" : "";
/* i%(n+1)==0 */
});
$('#per3Div table tr:not(:has(th))').addClass(function(i) {
return i % 4 > 1 ? "odd" : "";
});
$("#oddNotThDiv tr:not(:has(th)),#per2Div tr:not(:has(th)),#per3Div tr:not(:has(th))")
.hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
});
</script>
</head>
<body>
<div id="oddDiv">
<h4>隔行变色(th计算在内)</h4>
<br />
<table cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col width="10%">
<col width="20%">
<col width="20%">
<col width="20%">
<col width="15%">
<col width="15%">
</colgroup>
<tr>
<th>操作</th>
<th>地市</th>
<th>县市</th>
<th>营销名称</th>
<th>原价</th>
<th>优惠价</th>
</tr>
<tr>
<td>删除</td>
<td>测试</td>
<td>测试</td>
<td>测试名称</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除2</td>
<td>测试2</td>
<td>测试2</td>
<td>测试名称2</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除3</td>
<td>测试3</td>
<td>测试3</td>
<td>测试名称3</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除4</td>
<td>测试4</td>
<td>测试4</td>
<td>测试名称4</td>
<td>900</td>
<td>800</td>
</tr>
</table>
</div>
<div id="oddNotThDiv">
<h4>隔行变色(不包含th)</h4>
<br />
<table cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col width="10%">
<col width="20%">
<col width="20%">
<col width="20%">
<col width="15%">
<col width="15%">
</colgroup>
<tr>
<th>操作</th>
<th>地市</th>
<th>县市</th>
<th>营销名称</th>
<th>原价</th>
<th>优惠价</th>
</tr>
<tr>
<td>删除</td>
<td>测试</td>
<td>测试</td>
<td>测试名称</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除2</td>
<td>测试2</td>
<td>测试2</td>
<td>测试名称2</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除3</td>
<td>测试3</td>
<td>测试3</td>
<td>测试名称3</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除4</td>
<td>测试4</td>
<td>测试4</td>
<td>测试名称4</td>
<td>900</td>
<td>800</td>
</tr>
</table>
</div>
<div id="per2Div">
<h4>隔2行变色(不包含th)</h4>
<br />
<table cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col width="10%">
<col width="20%">
<col width="20%">
<col width="20%">
<col width="15%">
<col width="15%">
</colgroup>
<tr>
<th>操作</th>
<th>地市</th>
<th>县市</th>
<th>营销名称</th>
<th>原价</th>
<th>优惠价</th>
</tr>
<tr>
<td>删除</td>
<td>测试</td>
<td>测试</td>
<td>测试名称</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除2</td>
<td>测试2</td>
<td>测试2</td>
<td>测试名称2</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除3</td>
<td>测试3</td>
<td>测试3</td>
<td>测试名称3</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除4</td>
<td>测试4</td>
<td>测试4</td>
<td>测试名称4</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除5</td>
<td>测试5</td>
<td>测试5</td>
<td>测试名称5</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除6</td>
<td>测试6</td>
<td>测试6</td>
<td>测试名称6</td>
<td>900</td>
<td>800</td>
</tr>
</table>
</div>
<div id="per3Div">
<h4>2行2行变色(不包含th)</h4>
<br />
<table cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col width="10%">
<col width="20%">
<col width="20%">
<col width="20%">
<col width="15%">
<col width="15%">
</colgroup>
<tr>
<th>操作</th>
<th>地市</th>
<th>县市</th>
<th>营销名称</th>
<th>原价</th>
<th>优惠价</th>
</tr>
<tr>
<td>删除</td>
<td>测试</td>
<td>测试</td>
<td>测试名称</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除2</td>
<td>测试2</td>
<td>测试2</td>
<td>测试名称2</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除3</td>
<td>测试3</td>
<td>测试3</td>
<td>测试名称3</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除4</td>
<td>测试4</td>
<td>测试4</td>
<td>测试名称4</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除5</td>
<td>测试5</td>
<td>测试5</td>
<td>测试名称5</td>
<td>900</td>
<td>800</td>
</tr>
<tr>
<td>删除6</td>
<td>测试6</td>
<td>测试6</td>
<td>测试名称6</td>
<td>900</td>
<td>800</td>
</tr>
</table>
</div>
</body>
</html>
