怎么用css+js代码完成表格隔行换色。
本人初学JSP，我有两个表格 ，怎么样才能实现第二个表格的隔行换色的效果。希望大家给我个解决的办法。<TABLE>
<TR>
<TD>书名：<INPUT TYPE="text" NAME="name" value=<%=name %>>
类型：<select name="type" >
<option value="爱情" <%if(type.equalsIgnoreCase("爱情")) out.print("selected");%> >爱情</option>
<option value="经济" <%if(type.equalsIgnoreCase("经济")) out.print("selected");%> >经济</option>
</select>
价格区间 ：<INPUT TYPE="text" NAME="price1" value=<%=price1 %>>
<INPUT TYPE="text" NAME="price2" value=<%=price2 %>>
<INPUT TYPE="submit" NAME="submit" value="提交">
</TD>
</TR>
</TABLE>
<table id="tables">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>图书作者</td>
<td>图书类型</td>
<td>图书价格</td>
</tr>
<c:if test="${books.size()==0}">
<td>无图书信息</td>
</c:if>
<c:if test="${books.size()>0}">
<c:forEach var="books" items="${books}">
<tr>
<td>${books.bnumber }</td>
<td>${books.bname }</td>
<td>${books.bauthor }</td>
<td>${books.ptype }</td>
<td>${books.bprice}</td>
</tr>
</c:forEach>
</c:if>
</table> --------------------编程问答--------------------
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
</head>
<body>
<table id="tables">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>图书作者</td>
<td>图书类型</td>
<td>图书价格</td>
</tr>
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>图书作者</td>
<td>图书类型</td>
<td>图书价格</td>
</tr>
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>图书作者</td>
<td>图书类型</td>
<td>图书价格</td>
</tr>
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>图书作者</td>
<td>图书类型</td>
<td>图书价格</td>
</tr>
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>图书作者</td>
<td>图书类型</td>
<td>图书价格</td>
</tr>
</table>
<script>
function $(el){
return typeof el == 'string' ? document.getElementById(el) : el;
}
function $t(name, cot){
cot = cot || document;
return cot.getElementsByTagName(name);
}
var trs = $t('tr');
for(var i = 0, len = trs.length; i < len; i++){
if( i % 2 == 0 ){
trs[i].style.backgroundColor = '#999';
}
}
</script>
</body>
</html>
参考下 --------------------编程问答-------------------- 关注一下 --------------------编程问答--------------------
在第二个表格的tr上做文章
<c:forEach var="books" items="${books}">
<tr class="<c:if test="books.index%2==1"">基数行样式</c:if><c:else>偶数行样式</c:else>>
<td>${books.bnumber }</td>
<td>${books.bname }</td>
<td>${books.bauthor }</td>
<td>${books.ptype }</td>
<td>${books.bprice}</td>
</tr>
</c:forEach>
--------------------编程问答-------------------- <script type="text/javascript">
$(function() {
$("#t1 tbody>tr:odd").addClass("odd");
$("#t1 tbody>tr:even").addClass("even");
})
</script>
css 自己去写吧 --------------------编程问答-------------------- <script type="text/javascript">
$(document).ready(function(){
$("tr:odd").addClass("oddtest");
$("tr:even").addClass("eventest");
});
</script>
<style type="text/css">
.oddtest{
color: red;
}
.eventest{
color: green;
}
</style>
颜色什么的，自己去调吧。 --------------------编程问答-------------------- 看来jquery用的比较多
补充：Java , Web 开发
