巧妙实现表格奇偶行换色

要使在JSP页面中显示的table表格实现奇偶行换色效果，我最开始接触的就是用自定义标签，但是那样实现起来太复杂了，还麻烦，后来有了Jquery，实现起来相当简单
下面是用到的样式和JS
<style type="text/css">
table{border-collapse:collapse;}
table td{ height:21px;border:#A7DAE7 solid 1px;}
table th{ height:21px;border:#A7DAE7 solid 1px; background:#e4f3ec;}
tr.even td{ background:#9CF;}
tr.odd td{ background:#CCF;}
tr.alt td{ background:#96F;}
</style>
<script type="text/javascript" language="javascript" src=\'#\'" /script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#market tr:odd").addClass("odd");
$("#market tr:even").addClass("even");
$("#market tr").mouseover(function(){$(this).addClass("alt");}).mouseout(function(){$(this).removeClass("alt")});
});
</script>
<table id="market" width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">价格1</th>
<th scope="col">价格2</th>
<th scope="col">价格3</th>
</tr>
<tr>
<td id="pri1">23</td>
<td id="pri2">45</td>
<td id="pri3">36</td>
</tr>
<tr>
<td id="pri4">33</td>
<td id="pri5">16</td>
<td id="pri6">27</td>
</tr>
</table>
只需要导入Jquery文件，然后给table指定一个ID，就OK了

方法二：
但是，如果一个页面仅有一个显示数据的table，导入100多k的Jquery文件对页面的加载速度实在有影响，所以推荐使用下面的方法

首先定义两个样式（基数行和偶数行的背景颜色）
<style type="text/css">
.row0{ background:#E9EFF8}
.row1{ background:#E6D9F7}
</style>

然后用<c:foreach>迭代标签的 verStatus来做处理，就像下面这样
<c:forEach var="item" items="${closePrice}" varStatus="rows">
<tr class="row${rows.count%2}"> <td>${usermap.loginname }</td>
<td>${item.produceCode }</td>
<td>${item.forceDate }</td>
<td>${item.forceCloseno }</td>
</tr>
</c:forEach>

主要的还是红色部分，这样不用导入Jquery文件也不用自定义标签，轻松的就能实现奇偶行换色功能。

方法三：
利用CSS和JS共同来完成
添加CSS样式和JS样式

<style type="text/css">
.oddrow{ background:#dff; color:#000; }
.evenrow{background:#eef; color:#000; }
</style>

<script language="javascript">
onload=function(){
var rows=document.getElementsByTagName("tr");
for(var i=1;i <rows.length;i++){
rows[i].index=i
rows[i].className=(i%2==0)?"oddrow":"evenrow"
}
}
</script>

<style type="text/css">
.oddrow{ background:#dff; color:#000; } 
.evenrow{background:#eef; color:#000; }
</style>

<script language="javascript"> 
    var rows=document.getElementsByTagName("tr");
    for(var i=1;i <rows.length;i++){ 
        rows[i].index=i
        rows[i].className=(i%2==0)?"oddrow":"evenrow"
    } 
}
</script> 

补充，如果希望实现鼠标选中表格高亮显示可以在上面的基础上添加一些代码即可

<style type="text/css">
.oddrow{ background:#dff; color:#000; }
.evenrow{background:#eef; color:#000; }
.highlight{background:#eef;color:#000; }
</style>

<script language="javascript">
onload=function(){
var rows=document.getElementsByTagName("tr");
for(var i=1;i <rows.length;i++){
rows[i].index=i
rows[i].className=(i%2==0)?"oddrow":"evenrow"
rows[i].onmouseover=function(){
this.className="highlight";
}
rows[i].onmouseout=function(){
thisthis.className=this.index%2==0?"oddrow":"evenrow";
}
}
}
</script>