jstl隔行显示不同的背景色与ajax隔行显示不同的颜色-优快云博客

本文链接：https://blog.youkuaiyun.com/u012750578/article/details/16950283

一、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+="   &nbsp共有"+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>
   
   <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>