一、jstl隔行顯示不同的背景色
jstl:forEach隔行顯示不同的顏色原理:
c:forEach標籤的使用
在JSP的開發中，迭代是經常要使用到的操作。例如，逐行的顯示查詢的結果等。
JSTL所支持的迭代標籤有兩個，分別是c:forEach和c:forTokens。在這裏介紹的是c:forEach標籤。
簡單點說，標籤的作用就是迭代輸出標籤內部的內容。它既可以進行固定次數的迭代輸出，也可以依據集合中對象的個數來決定迭代的次數。
c:forEach標籤的語法定義如下所示。
<c:forEach var="name" items="expression" varStatus="name"
begin="expression" end="expression" step="expression">
</c:forEach>
標籤具有以下一些屬性：
var：迭代參數的名稱。在迭代體中可以使用的變量的名稱，用來表示每一個迭代變量。
items：要進行迭代的集合。對於它所支持的類型將在下面進行講解。
varStatus：迭代變量的名稱，用來表示迭代的狀態，*** 可以訪問到迭代自身的信息。***
begin：如果指定了items，那麼迭代就從items[begin]開始進行迭代；如果沒有指定items，那麼就從begin開始迭代。它的類型爲整數。
end：如果指定了items，那麼就在items[end]結束迭代；如果沒有指定items，那麼就在end結束迭代。它的類型也爲整數。
step：迭代的步長。
標籤的items屬性支持Java平臺所提供的所有標準集合類型。此外，您可以使用該操作來迭代數組（包括基本類型數組）中的元素。它所支持的集合類型以及迭代的元素如下所示：
java.util.Collection：調用iterator()來獲得的元素。
java.util.Map：通過java.util.Map.Entry所獲得的實例。
java.util.Iterator：迭代器元素。
java.util.Enumeration：枚舉元素。
Object實例數組：數組元素。
基本類型值數組：經過包裝的數組元素。
用逗號定界的String：分割後的子字符串。
javax.servlet.jsp.jstl.sql.Result：SQL查詢所獲得的行。
不論是對整數還是對集合進行迭代，的varStatus屬性所起的作用相同。和var屬性一樣，varStatus用於創建限定了作用域的變量（改變量只在當前標籤體內起作用）。不過，由varStatus屬性命名的變量並不存儲當前索引值或當前元素，而是賦予javax.servlet.jsp.jstl.core.LoopTagStatus類的實例。該類包含了一系列的特性，它們描述了迭代的當前狀態，如下這些屬性的含義如下所示：
current：當前這次迭代的（集合中的）項。
index：當前這次迭代從0開始的迭代索引。
count：當前這次迭代從1開始的迭代計數。
first：用來表明當前這輪迭代是否爲第一次迭代，該屬性爲boolean類型。
last：用來表明當前這輪迭代是否爲最後一次迭代，該屬性爲boolean類型。
begin：begin屬性的值。
end：end屬性的值
step：step屬性的值
jstl隔行顯示不同顏色的實現代碼:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'queryAll.jsp' starting page</title>
<link rel="stylesheet" href="../css/layout.css" type="text/css"></link>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<script>
var path="<%=request.getContextPath()%>";
var maxpagesize=${maxPage};
function del(id){
//alert(id);
//alert(path);
if(confirm('確認刪除嗎？如果確認點擊確定，數據將無法恢復！'))
window.location.href=path+"/jstl/delDutyApply.action?dutyBean.id="+id+"&pageInfo.currentPage="+${currentPage};
}
function edit(id){
//alert(id)
window.location.href=path+"/jstl/updateDutyApply.action?dutyBean.id="+id+"&pageInfo.currentPage="+${currentPage};
}
function detail(id){
//alert(id);
window.location.href=path+"/jstl/detailDutyApply.action?dutyBean.id="+id;
}
//分頁
function paging(currentPage){
alert("當前頁"+currentPage);
alert("最大頁數"+maxpagesize)
window.location.href=path+"/jstl/queryDutyApply.action?pageInfo.currentPage="+currentPage;
}
//判斷是否合法頁數
function valPagesize(size){
if(size>=1&&size<=maxpagesize){
return true;
}else if(size<1){
alert("頁不能小於1");
$("#page").focus();
return false;
}else if(size>maxpagesize){
alert("輸入的頁數不能大於最大頁數");
$("#page").focus();
return false;
}else{
alert("輸入的頁數不合法");
$("#page").focus();
return false;
}
}
function EnterPress(e){ //傳入 event
var e = e || window.event;
if(e.keyCode == 13){
//alert($("#page").val());
//alert("最大頁數:"+$("#maxpagesize").val());
if(valPagesize($("#page").val())){
paging($("#page").val());
}
}
}
//跳轉
function goPage(){
//頁數合法進行分頁
if(valPagesize($("#page").val())==true){
paging($("#page").val());
}
}
</script>
<body>
<div class="main">
<div class="main_box03">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"><img src="../images/title_a.jpg" width="10" height="41" /></td>
<td class="main_box01_t">請假信息列表</td>
<td width="10" align="right"><img src="../images/title_c.jpg" width="10" height="41" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="200" valign="top">
<form action="<%=request.getContextPath()%>//jstl/queryDutyApply.action" method="post">
<table>
<tr>
<td><font size="2">請假類型:</font></td>
<td>
<select name="dutyBean.apptype">
<option value="0">請假</option>
<option value="1">出差</option>
<option value="2">培訓</option>
</select>
</td>
<td><font size="2">審覈批准:</font></td>
<td>
<select name="dutyBean.isagree">
<option value="0">未批准</option>
<option value="1">已批准</option>
<option value="2">不批准</option>
</select>
</td>
<td>
<input type="submit" value="查詢"/>
</td>
<td>
<input type="reset" value="重置"/>
</td>
<td colspan="6"></td>
</tr>
</table>
</form>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_list02">
<tr>
<th>
ID
</th>
<th>
開始日期
</th>
<th>
開始時間
</th>
<th>
結束日期
</th>
<th>
結束時間
</th>
<th>
申請人
</th>
<th>
申請類型
</th>
<th>
申請時間
</th>
<th>
是否批准
</th>
<th>
批准人
</th>
<th>
請假事由
</th>
<th>
審覈批准
</th>
</tr>
<c:choose>
<c:when test="${dutyList!=null}">
<c:forEach items="${dutyList}" var="d" varStatus="status" >
<tr <c:if test="${status.count%2==0}">
style="background-color:#F2F2F2;"</c:if>>
<td>
<c:out value="${d.id}"></c:out>
</td>
<td>
<c:out value="${d.startcalender}"></c:out>
</td>
<td>
<c:out value="${d.starttime}"></c:out>
</td>
<td>
<c:out value="${d.endcalender}"></c:out>
</td>
<td>
<c:out value="${d.endtime}"></c:out>
</td>
<td>
<c:choose>
<c:when test="d.appusername!=null">
<c:out value="${d.appusername}"></c:out>
</c:when>
<c:otherwise>
<c:out value="無"></c:out>
</c:otherwise>
</c:choose>
</td>
<td>
<c:choose>
<c:when test="${d.apptype==0}">
<c:out value="請假"></c:out>
</c:when>
<c:when test="${d.apptype==1}">
<c:out value="出差"></c:out>
</c:when>
<c:otherwise>
<c:out value="培訓"></c:out>
</c:otherwise>
</c:choose>
</td>
<td>
<c:out value="${d.apptime}"></c:out>
</td>
<td>
<c:choose>
<c:when test="${d.isagree==0}">
<c:out value="未批准"></c:out>
</c:when>
<c:when test="${d.isagree==1}">
<c:out value="已批准"></c:out>
</c:when>
<c:otherwise>
<c:out value="不批准"></c:out>
</c:otherwise>
</c:choose>
</td>
<td>
<c:choose>
<c:when test="d.agreeusername!=null">
<c:out value="${d.agreeusername}"></c:out>
</c:when>
<c:otherwise>
<c:out value="無"></c:out>
</c:otherwise>
</c:choose>
</td>
<td>
<c:out value="${d.appresson}"></c:out>
</td>
<td>
<input type="button" value="刪除"
οnclick="del(<c:out value="${d.id}"/>)" />
<c:choose>
<c:when test="${d.isagree==1}">
<input type="button" value="批准" disabled="disabled"/>
</c:when>
<c:otherwise>
<input type="button" value="批准"
οnclick="edit(<c:out value="${d.id}"/>)" />
</c:otherwise>
</c:choose>
<input type="button" value="詳細"
οnclick="detail(<c:out value="${d.id}"/>)" />
</td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
<tr><td colspan="12">沒有符合條件記錄，請重置查詢條件!</td></tr>
</c:otherwise>
</c:choose>
<tr><td colspan="12">
<c:choose>
<c:when test="${currentPage > 1}">
<a
href="<%=request.getContextPath()%>/jstl/queryDutyApply.action?pageInfo.currentPage=1">首頁</a>
<a
href="<%=request.getContextPath()%>/jstl/queryDutyApply.action?pageInfo.currentPage=${currentPage-1}">上一頁</a>
</c:when>
<c:otherwise>
首頁 上一頁
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${currentPage < maxPage}">
<a
href="<%=request.getContextPath()%>/jstl/queryDutyApply.action?pageInfo.currentPage=${currentPage+1}">下一頁</a>
<a
href="<%=request.getContextPath()%>/jstl/queryDutyApply.action?pageInfo.currentPage=${maxPage}">末頁</a>
</c:when>
<c:otherwise>
下一頁 末頁
</c:otherwise>
</c:choose>
當前第[${currentPage}]頁 總共[${maxPage}]頁 <input type="button" id="pading" οnclick="goPage()" value="轉到"/>
<input type="text" id="page" size="1" οnkeypress="EnterPress(event)" />頁
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"><img src="../images/box_b01.jpg" width="10" height="10" /></td>
<td width="980" class="box_b02"></td>
<td width="10" align="right"><img src="../images/box_b03.jpg" width="10" height="10" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
jquery ajax隔行顯示不同的顏色:
jquery ajax隔行顯示實現代碼:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script>
var maxpagesize=1;//最大頁數,初始定義爲1
var currentPage;
//alert("maxpagesize="+maxpagesize);
var contextPath=$("#contextPath").val();
$(function(){
init();
})
//初始化方法
function init(){
//alert("hello world!");
var url=contextPath+"/qwsq/queryDutyList.action";
var param="";
var tb=$("#dutyApply");
addDutyApplTableData(tb,url,param);
initSchedTime();
}
//初始化數據,表頭固定加<thread>表頭</thread>,<tbody>數據</tbody>
function addDutyApplTableData(tb,url,param){
//alert("分頁參數2"+param);
resetSeach();
var html="";
html+="<tbody>"
$.ajax({
url:url,
type:"post",
data:param,//記住,data爲傳送的參數
dataType:"json",
error:function(XMLHttpRequest,textStatus,errorThrown){
//alert("========"+XMLHttpRequest.redayState+"|"+textStatus+"|"+errorThrown);
},
success:function(data){
//alert("currentPage=:"+data.currentPage)//進行分頁封裝後,彈出當前頁
maxpagesize=data.totalPage;
currentPage=data.currentPage;
//alert("最大頁數:"+maxpagesize);
//alert(data.totalCount);//打印記錄行數
if(data.totalCount==0){
html+="<tr><td colspan='12' align='left'>您好，沒有符合條件的記錄,請重置搜索條件</td></tr></tbody>";
tb.append(html);
//alert("您好，沒有符合條件的記錄,請重置搜索條件");
}
$.each(data.datas,function(i,du){
//alert(du.agreetime)
//隔行顯示不同的顏色
if(i%2!=0){
html+="<tr style='background-color:#F2F2F2;'>";
}else{
html+="<tr>";
}
html+="<td>"+du.id+"</td>";
html+="<td>"+du.endcalender+"</td>";
html+="<td>"+du.starttime.substring(0,2)+":"+du.starttime.substring(2,4)+"</td>";
html+="<td>"+du.endcalender+"</td>";
html+="<td>"+du.endtime.substring(0,2)+":"+du.endtime.substring(2,4)+"</td>";
if(du.apptype==0){
html+="<td>請假</td>";
}else if(du.apptype==1){
html+="<td>出差</td>";
}else if(du.apptype==2){
html+="<td>培訓</td>";
}
html+="<td>"+du.apptime+"</td>";
if(du.isagree==0){
html+="<td>未批准</td>";
}else if(du.isagree==1){
html+="<td>已批准</td>";
}else if(du.isagree==2){
html+="<td>不批准</td>";
}
html+="<td>"+du.appresson+"</td>";
if(du.appplace==null){
html+="<td>無</td>";
}else{
html+="<td>"+du.appplace+"</td>";
}
//如果isagree==1設置button爲不可用
if(du.isagree==1){
html+="<td><input type='button' value='批准' disabled='disabled' οnclick='agree("+du.id+")'/></td>";
}else{
html+="<td><input type='button' value='批准' οnclick='agree("+du.id+")'/></td>";
}
html+="<td><input type='button' value='刪除' οnclick='del("+du.id+")'/></td>";
html+="</tr>";
});//.each循環結束
//分頁
html+="<tr>";
html+="<td colspan='12'>當前頁"+data.currentPage;
html+="  共有"+data.totalPage+"頁 ";
//alert("共有多少頁:"+data.totalPage);
if(data.currentPage>1){
html+="<a οnclick='paging(1);' href='javascript:void(0);'>首頁</a> ";
}else{
html+="首頁 ";
}
if(data.currentPage>1){
html+="<a οnclick='paging("+(data.currentPage-1)+");' href='javascript:void(0);'>上一頁</a> ";
}else{
html+="上一頁 ";
}
if(data.currentPage<data.totalPage){
html+="<a οnclick='paging("+(data.currentPage+1)+");' href='javascript:void(0);'>下一頁</a> ";
}else{
html+="下一頁 ";
}
if(data.currentPage<data.totalPage){
html+="<a οnclick='paging("+(data.totalPage)+");' href='javascript:void(0);'>尾頁</a> ";
}else{
html+="尾頁 ";
}
html+="<input type='text' id='page' size='1' οnkeypress='EnterPress(event)'/>"+"頁 "+"<input type='button' value='Go' οnclick='goPage()'/>";
html+="</td>";
html+="</tr>";
html+="</tbody>";
tb.append(html);
}//success
})//ajax
};//函數
function EnterPress(e){ //傳入 event
var e = e || window.event;
if(e.keyCode == 13){
//alert($("#page").val());
//alert("最大頁數:"+$("#maxpagesize").val());
if(valPagesize($("#page").val())){
paging($("#page").val());
}
}
}
//跳轉
function goPage(){
//頁數合法進行分頁
if(valPagesize($("#page").val())==true){
paging($("#page").val());
}
}
//判斷是否合法頁數
function valPagesize(size){
if(size>=1&&size<=maxpagesize){
return true;
}else if(size<1){
alert("頁不能小於1");
$("#page").focus();
return false;
}else if(size>maxpagesize){
alert("輸入的頁數不能大於最大頁數");
$("#page").focus();
return false;
}else{
alert("輸入的頁數不合法");
$("#page").focus();
return false;
}
}
//分頁
function paging(param){
var param="pageInfo.currentPage="+param;
//alert("分頁參數 :"+param)
var tb=$("#dutyApply");
tb.html("");//清空內容
addDutyApplyTableHead();//添加表頭
var url=contextPath+"/qwsq/queryDutyList.action";
addDutyApplTableData(tb,url,param);
}
//刪除
function del(id){
//alert(id);
var id=id;
var url=contextPath+"/qwsq/deleteData.action";
save(id,url);
}
//批准
function agree(id){
//alert(id);
var id=id;
var url=contextPath+"/qwsq/updateData.action";
save(id,url);
}
//修改，刪除
function save(id,url){
if(confirm("確定要對記錄進行修改嗎?")){
//多個參數爲:param="id="+id+"&id2="+id2+.....
var param="dutyBean.id="+id+"&pageInfo.currentPage="+currentPage;
$.ajax({
url:url,
type:"post",
data:param,
error:function(XMLHttpRequest,textStatus,errorThrown){
//alert("========"+XMLHttpRequest.redayState+"|"+textStatus+"|"+errorThrown);//彈出信息
},
success:function(data){
if(data==1){
alert("操作成功!");
}else{
alert("操作失敗!");
}
//由於ajax是異步,要把顯示的數據寫在操作成功后里面，即success:function(data){執行的操作}
var tb=$("#dutyApply");
tb.html("");
addDutyApplyTableHead();//添加表頭
var url=contextPath+"/qwsq/queryDutyList.action";
var param="pageInfo.currentPage="+currentPage;
addDutyApplTableData(tb,url,param);
}
})//ajax
}//confirm
}//函數
//生成表頭
function addDutyApplyTableHead(){
var tb=$("#dutyApply");
//爲了使表頭固定，這是先加<thread></thread>
var html="";
html+="<tr>";
html+="<th>ID</th>";
html+="<th>開始日期</th>";
html+="<th>開始時間</th>";
html+="<th>結束日期</th>";
html+="<th>結束時間</th>";
html+="<th>請假類型</th>";
html+="<th>申請時間</th>";
html+="<th>是否批准</th>";
html+="<th>請假事由</th>";
html+="<th>地點</th>";
html+="<th>審覈批准</th>";
html+="<th>管理</th>";
html+="</tr>";
tb.append(html);
}
//搜索
function search(){
var tb=$("#dutyApply");
var param=$("#searchForm").serialize();//表單參數序列化
tb.html("");
addDutyApplyTableHead();
var url=contextPath+"/qwsq/queryDutyList.action";
var tb=$("#dutyApply");
//alert("============參數===========:"+param);
addDutyApplTableData(tb,url,param);
}
//重置搜索條件
function resetSeach(){
$("#apptype").val("0");
$("#isagree").val("0");
}
//下拉列表框賦值
function initSchedTime(){
var sTimeObj=$("#sTime");
var eTimeObj=$("#eTime");
var appSTimeObj=$("#appSTime");
var appETimeObj=$("#appETime");
for(var i=0;i<24;i++){
var hour=i;
if(i<10){
hour="0"+i;
}
var html1="<option value='"+hour+"00'>"+hour+":00</option>";
var html2="<option value='"+hour+"30'>"+hour+":30</option>";
sTimeObj.append(html1);
sTimeObj.append(html2);
eTimeObj.append(html1);
eTimeObj.append(html2);
appSTimeObj.append(html1);
appSTimeObj.append(html2);
appETimeObj.append(html1);
appETimeObj.append(html2);
}
}
</script>
<link rel="stylesheet" href="../css/layout.css" type="text/css"></link>
</head>
<body>
<!-- 用來獲取工程的根目錄,需要用的名稱都使用對象名.屬性名，充分利用Struts2面向對象的功能 -->
<input type="hidden" value="${pageContext.request.contextPath} id="contextPath">
<center>
<div id="main">
<div class="main_box03">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"><img src="../images/title_a.jpg" width="10" height="41" /></td>
<td class="main_box01_t">請假信息列表</td>
<td width="10" align="right"><img src="../images/title_c.jpg" width="10" height="41" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="200" valign="top">
<form id="searchForm">
<table width="100%" >
<tr>
<td>請假類型</td>
<td>
<select name="dutyBean.apptype" id="apptype" >
<option value="0">請假</option>
<option value="1">出差</option>
<option value="2">培訓</option>
</select>
</td>
<td>審覈批准</td>
<td>
<select name="dutyBean.isagree" id="isagree">
<option value="0">未批准</option>
<option value="1">已批准</option>
</select>
</td>
<td align="center">
<input type="button" id="btnSeach" value="查詢" οnclick="search()"/>
<input type="button" value="重置" οnclick="resetSeach()"/>
</td>
<td width="500px">
</td>
</tr>
</table>
</form>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="dutyApply" class="table_list02">
<tr>
<th>ID</th>
<th>開始日期</th>
<th>開始時間</th>
<th>結束日期</th>
<th>結束時間</th>
<th>請假類型</th>
<th>申請時間</th>
<th>是否批准</th>
<th>請假事由</th>
<th>地點</th>
<th>審覈批准</th>
<th>管理</th>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"><img src="../images/box_b01.jpg" width="10" height="10" /></td>
<td width="980" class="box_b02"></td>
<td width="10" align="right"><img src="../images/box_b03.jpg" width="10" height="10" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>