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>

原文地址:https://www.cnblogs.com/archie2010/p/1945192.html