jstl隔行显示不同的背景色与ajax隔行显示不同的颜色

一、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="删除"
onclick="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="批准"
onclick="edit(<c:out value="${d.id}"/>)" />
</c:otherwise>
</c:choose>
<input type="button" value="详细"
onclick="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" onclick="goPage()" value="转到"/>
  <input type="text" id="page" size="1" onkeypress="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,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' onclick='agree("+du.id+")'/></td>"; }else{ html+="<td><input type='button' value='批准' onclick='agree("+du.id+")'/></td>"; } html+="<td><input type='button' value='删除' onclick='del("+du.id+")'/></td>"; html+="</tr>"; });//.each循环结束 //分页 html+="<tr>"; html+="<td colspan='12'>当前页"+data.currentPage; html+="   &nbsp共有"+data.totalPage+"页    "; //alert("共有多少页:"+data.totalPage); if(data.currentPage>1){ html+="<a onclick='paging(1);' href='javascript:void(0);'>首页</a>    "; }else{ html+="首页    "; } if(data.currentPage>1){ html+="<a onclick='paging("+(data.currentPage-1)+");' href='javascript:void(0);'>上一页</a>    "; }else{ html+="上一页    "; } if(data.currentPage<data.totalPage){ html+="<a onclick='paging("+(data.currentPage+1)+");' href='javascript:void(0);'>下一页</a>    "; }else{ html+="下一页    "; } if(data.currentPage<data.totalPage){ html+="<a onclick='paging("+(data.totalPage)+");' href='javascript:void(0);'>尾页</a>    "; }else{ html+="尾页    "; } html+="<input type='text' id='page' size='1' onkeypress='EnterPress(event)'/>"+"页  "+"<input type='button' value='Go' onclick='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,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,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,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,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>  <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="查询" onclick="search()"/>   <input type="button" value="重置" onclick="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>

jstl隔行显示不同的背景色与ajax隔行显示不同的颜色

猜你在找的Ajax相关文章