js实现table的tr三色交错显示
三色或多色交错显示table的tr，可以使得table更漂亮，不会显得那么单调
下面直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table的tr三色交错显示</title>
</head>
<style type="text/css">
table{
width: 50%;
border-collapse: collapse;/* 无cellpadding和cellspacing */
text-align: center;/* table内文字水平居中 */
margin: 0 auto;/* table水平居中 */
}
th{
background-color: rosybrown;
}
.trBule{
background-color: skyblue;
}
.trPink{
background-color: pink;
}
.trYellow{
background-color: beige
}
</style>
<body>
<table>
<tr>
<th>水果名</th>
<th>个数</th>
<th>单价</th>
<th>总价</th>
</tr>
<tr>
<td>apple</td>
<td>10</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<td>orange</td>
<td>10</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<td>banana</td>
<td>10</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<td>Grape</td>
<td>10</td>
<td>5</td>
<td>50</td>
</tr>
<tr>
<td>pear</td>
<td>10</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<td>strawberry</td>
<td>10</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<td>watermelon</td>
<td>10</td>
<td>10</td>
<td>100</td>
</tr>
</table>
</body>
<script type="text/javascript">
/* 获取tr容器 */
var trTag = document.getElementsByTagName('tr');
/* tr标签的数量 */
var trCount = trTag.length;
for(var i = 0; i < trCount; i++){
if(i % 3 == 1){
trTag[i].className = 'trBule';
}else if(i % 3 == 2){
trTag[i].className = 'trPink';
}else{
trTag[i].className = 'trYellow';
}
}
</script>
</html>
效果图: 
1080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
