jQuery_完成表格的隔行换色
表格的颜色一样不利于区分，而利用jQuery则可以很方便的进行表格的隔行换色操作，原表如下：这样看着很不方便，但是隔行换色之后非常便捷清楚。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成表格隔行换色</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("tbody tr:even").addClass("even");//将tbody的每个tr的偶数行添加even的类，添加后相当于每个奇数行都添加<class="even">的代码，偶数行同样
$("tbody tr:odd").addClass("odd");//even用来选择偶数行odd用来选择奇数行
})
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>css代码如下：
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
padding-left:25px;
}
.onSuccess{
background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
padding-left:25px;
}
.high{
color:red;
}
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even { background:#FFF38F;}/* 偶数行样式*/
.odd { background:#FFFFEE;}/* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}正是因为有.even和.odd里面的设置，这样才能使用addClass()方法，达到隔行换色的方法。当然也可以不用addClass()方法。
另一种方法的代码：
$(function(){
$("tbody tr:even").css("background-color","yellow");//注意颜色也要用分号引起来
$("tbody tr:odd").css("background-color","pink");
// $("tbody tr:even").addClass("even");
// $("tbody tr:odd").addClass("odd");
})表的结构不变，用css()方法可以添加属性和属性值。
文档来源：51CTO技术博客https://blog.51cto.com/u_15316404/3217307
页:
[1]