JSTL分类查询

index.jsp

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  3 <%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
  4 <%
  5     String path = request.getContextPath();
  6     String basePath = request.getScheme() + "://"
  7             + request.getServerName() + ":" + request.getServerPort()
  8             + path + "/";
  9 %>
 10 
 11 <!DOCTYPE HTML>
 12 <html>
 13 <head>
 14     <base href="<%=basePath%>">
 15     <title>账单管理</title>
 16     <meta http-equiv="pragma" content="no-cache">
 17     <meta http-equiv="cache-control" content="no-cache">
 18     <meta http-equiv="expires" content="0">
 19     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 20     <style>
 21         table{width:700px;}
 22         table ,tr ,td, th
 23          {
 24              text-align: center;
 25              border:1px black solid;
 26              border-collapse:collapse;
 27          }
 28          .setGreen{background-color: green;}
 29          .over{background-color:#f9360d;}
 30          span{font-weigh:bold;color:red;}
 31     </style>
 32     <script>
 33         function setTableColor()
 34         {
 35             var table = $("#showTable")[0];
 36             for(var i = 0; i < table.rows.length; i++)
 37             {
 38                 if(i % 2 == 0)
 39                 {
 40                     table.rows[i].className = "setGreen";
 41                 }
 42                 var name;
 43                 table.rows[i].onmouseover = function()
 44                 {
 45                     name = this.className;
 46                     this.className = "over";
 47                 }
 48                 table.rows[i].onmouseout = function()
 49                 {
 50                     this.className = name;
 51                 }
 52             }
 53         }
 54         $(
 55             function loadType()
 56             {
 57                 var select = $("#bookClass");
 58                 select.html("<option value='0'>不限</option>");
 59                 $.ajax
 60                 ({
 61                     url:"type_query",
 62                     type:"post",
 63                     dataType:"json",
 64                     success:function(data)
 65                     {
 66                         var types = data.typeList;
 67                         for(var i = 0; i < types.length; i++)
 68                         {
 69                             var option = "<option value='"+types[i].id+"'>"+types[i].name+"</option>";
 70                             select.append(option);
 71                         }
 72                     },
 73                     error:function()
 74                     {
 75                         alert("服务器忙!");
 76                     }
 77                 });
 78             }
 79         );
 80         function checkTime(timeInput)
 81         {
 82             var time = timeInput.value;
 83             var regTime = /^(\d{4})-(0\d{1}|1[0-2])-(0\d{1}|[12]\d{1}|3[01])$/;
 84             var error = $("#error");
 85             error.html("");
 86             if(regTime.test(time) || time == "")
 87             {
 88                 return true;
 89             }
 90             error.html("日期格式不正确!(yyyy-MM-dd)");
 91             return false;
 92         }
 93         function checkAll()
 94         {
 95             if(checkTime($("#begintime")[0]) && checkTime($("#endtime")[0]))
 96             {
 97                 return true;
 98             }
 99             return false;                
100         }
101     </script>
102 </head>
103 <body>
104     <div align="center">
105         <h1>账单管理系统</h1>
106         <form action="bill_query" method="post" onsubmit="return checkAll();">
107         类型:<select id="bookClass" name="typeid"></select>&nbsp; 
108         时间:<input type="text" id="begintime" name="begintime" onblur="checkTime(this);" />&nbsp;&nbsp;
109         <input type="text" id="endtime" name="endtime" onblur="checkTime(this);" />&nbsp; 
110         <input type="submit" id="query" value="搜索" onclick="query(1,10);" /> 
111         <input type="button" value="记账" onclick="javascript:window.location='record.jsp'" /></br>
112         </br></form>
113         <table id="showTable">
114             <tr><th>行号</th><th>标题</th><th>记账时间</th><th>类别</th><th>金额</th><th>说明</th></tr>
115             <c:forEach items="${billList}" var="each" varStatus="status">
116                 <tr>
117                     <td>${status.count}</td>
118                     <td>${each.title}</td>
119                     <td>${each.billtime}</td>
120                     <td>
121                         <c:forEach items="${typeList}" var="type">
122                             <c:if test="${each.typeid == type.id}">
123                                 ${type.name}
124                             </c:if>
125                         </c:forEach>
126                     </td>
127                     <td>${each.price}</td>
128                     <td>${each.remark}</td>
129                 </tr>
130             </c:forEach>
131             <c:if test="${billList == null || fn:length(billList) == 0}">
132                 <tr><td colspan="6"><h3>没有查到任何数据!</h3></td></tr>
133             </c:if>
134             <c:if test="true">
135                 <script>setTableColor();</script>
136             </c:if>
137         </table>
138         <span><h3 id="error"></h3></span>
139     </div>
140 </body>
141 </html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值