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
>