jquerry之隔行跳色

效果如下图所示：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <mce:script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script> 
   <mce:script type="text/javascript"><!--
      $(document).ready(function(){
        $("select").change(function(){
         var orderid=$("select").val();
         if(orderid!=0){
            window.location.href="listtransInfo.jspx?oid="+orderid;
         }
  
        });
        
        $(".table tr").mouseover(function(){
         $(this).addClass("over");
        });
        $(".table tr").mouseout(function(){
         $(this).removeClass("over");
        });
        $(".table tr:even").addClass("alt");
        
      });
   
   
// --></mce:script>
   
    <mce:style type="text/css"><!--
    body{
     
      color:#666;
    }
    
    tr.alt td {
        background:#ecf6fc;  
    }
 
    tr.over td {
        background:#bcd4ec;  
     }
    
--></mce:style><style type="text/css" mce_bogus="1">    body{
     
      color:#666;
    }
    
    tr.alt td {
        background:#ecf6fc;  
    }
 
    tr.over td {
        background:#bcd4ec;  
     }
    </style>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
  </head>
  
  <body>
  
  <br>
  <select name="order">
     <option value="0">排序方式</option>
     <option value="1">按时间排序</option>
     <option value="2">按金额排序</option>
  </select>
  <br>
     <span style="font-size:13px;color:green;" mce_style="font-size:13px;color:green;">共有${pages.totalCount }条数据  每页显示${pages.pageSize }条数据 共分${pages.totalPages }页 当前是第${pages.currentPageNo }页</span>
    <c:choose>
        <c:when test="${pages.currentPageNo == 1}">
            <span style="font-size:13px;" mce_style="font-size:13px;">首页</span>
        </c:when>
        <c:otherwise>
             <a href="listtransInfo.jspx?uid=${user_session.id}&pageNo=1" mce_href="listtransInfo.jspx?uid=${user_session.id}&pageNo=1" style="font-size:13px;" mce_style="font-size:13px;">首页</a>
        </c:otherwise>
    </c:choose>
    
       <c:choose>
           <c:when test="${pages.hasPavPage}">
               <a href="listtransInfo.jspx?uid=${user_session.id}&pageNo=${pages.currentPageNo -1 }" mce_href="listtransInfo.jspx?uid=${user_session.id}&pageNo=${pages.currentPageNo -1 }" style="font-size:13px;" mce_style="font-size:13px;">上一页</a>
           </c:when>
           <c:otherwise>
               <span style="font-size:13px;" mce_style="font-size:13px;">上一页</span>
           </c:otherwise>
       </c:choose>
    
    <c:choose>
        <c:when test="${pages.hasNextPage}">
            <a href="listtransInfo.jspx?uid=${user_session.id}&pageNo=${pages.currentPageNo + 1 }" mce_href="listtransInfo.jspx?uid=${user_session.id}&pageNo=${pages.currentPageNo + 1 }" style="font-size:13px;" mce_style="font-size:13px;">下一页</a>
        </c:when>
        <c:otherwise>
               <span style="font-size:13px;" mce_style="font-size:13px;">下一页</span>
           </c:otherwise>
    </c:choose>
    
    <c:choose>
        <c:when test="${pages.currentPageNo == pages.totalPages}">
            <span style="font-size:13px;" mce_style="font-size:13px;">尾页</span>
        </c:when>
        <c:otherwise>
             <a href="listtransInfo.jspx?uid=${user_session.id}&pageNo=${pages.totalPages }" mce_href="listtransInfo.jspx?uid=${user_session.id}&pageNo=${pages.totalPages }" style="font-size:13px;" mce_style="font-size:13px;">尾页</a>
        </c:otherwise>
    </c:choose>
  
  
   <table class="table" style=" font-size:15px;" mce_style=" font-size:15px;" 
align="left" cellspacing="1" border="0" cellpadding="0" bgcolor="green" width="80%" style="color:#333" mce_style="color:#333">
   
     <tr bgcolor="white">
        <td>收账人姓名</td>
        <td>收账人账号</td>
        <td>转账金额</td>
        <td>日期</td>
     </tr>
      <c:forEach items="${pages.pageList}" var="trans">
        <tr bgcolor="white">
          <td>${trans.user.userName }</td>
          <td>${trans.taccountNum}</td>
          <td>${trans.tmoney }</td>
          <td>${trans.tdate }</td>
        </tr>
      </c:forEach>
   </table>
  
  </body>
</html>

posted on 2010-08-16 20:57  archie2010  阅读(278)  评论(0)  编辑  收藏  举报