<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>使用JQuery实现隔行变色</title>
<script src="jquery-1.8.0.js"></script>
</head>
<style type="text/css">
body{
font-size:12px;
text-align:center;
}
#tbStu{
width:260px;
border:solid 1px #666;
background-color:#eee;
}
#tbStu tr{
line-height:23px;
}
#tbStu th{
background-color:#ccc;
color:#fff;
}
#tbStu .trOdd{
background-color:#f00;
}
</style>
<script type="text/javascript">
$(function(){
$(function(){
$("#tbStu tr:nth-child(even)").addClass("trOdd");
});
});
</script>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tr>
<th>aaa</th><th>bbb</th><th>ccc</th><th>ddd</th>
</tr>
<!-- 奇数 -->
<tr>
<td>1001</td><td>1001</td><td>1001</td><td>1001</td>
</tr>
<!-- 偶数 -->
<tr>
<td>1001</td><td>1001</td><td>1001</td><td>1001</td>
</tr>
<!-- 奇数 -->
<tr>
<td>1001</td><td>1001</td><td>1001</td><td>1001</td>
</tr>
<!-- 偶数 -->
<tr>
<td>1001</td><td>1001</td><td>1001</td><td>1001</td>
</tr>
<!-- 奇数 -->
<tr>
<td>1001</td><td>1001</td><td>1001</td><td>1001</td>
</tr>
<!-- 偶数 -->
<tr>
<td>1001</td><td>1001</td><td>1001</td><td>1001</td>
</tr>
</table>
</body>
</html>
使用JQuery实现隔行变色
最新推荐文章于 2021-01-13 19:43:06 发布