怎么用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>

解决方案 »

  1.   


    <!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>参考下
      

  2.   

    在第二个表格的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>
      

  3.   

    <script type="text/javascript">
    $(function() {
    $("#t1 tbody>tr:odd").addClass("odd");
    $("#t1 tbody>tr:even").addClass("even");
            })
    </script>
    css 自己去写吧
      

  4.   

    <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>
    颜色什么的，自己去调吧。