`
chaoyi
  • 浏览: 291169 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jsp 和效果图

 
阅读更多

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>图书信息列表</title>
<style type="text/css">
*{font-size:14px;font-family:"宋体";color:#333;line-height:24px;margin:0;}
div{width:480;margin:20px auto;}
.bookInfo{font-size:16px;font-weight:bold;background-color:#cf0;}
table tr td{padding:0px 5px;}
a{color:#f60;text-decoration:none;}
a:hover{color:#c00;text-decoration:underline;}
</style>
</head>

<body>
	<div>
		<table border="1">
			<tr>
				<td colspan="5" align="center" class="bookInfo">图书信息</td>
			</tr>
			<tr>
				<td>图书名称</td>
				<td>图书作者</td>
				<td>购买时间</td>
				<td>图书分类</td>
				<td>操作</td>
			</tr>
			<c:forEach var="item" items="${list }" varStatus="i">
				<tr
					<c:if test="${i.index%2 ne 0}" >style="background-color:#cff"</c:if>>
					<td>${item.name }</td>
					<td>${item.author }</td>
					<td>${item.time }</td>
					<td><c:if test="${item.type eq 1 }">计算机/软件</c:if> <c:if
							test="${item.type eq 2 }">小说/文摘</c:if> <c:if
							test="${item.type eq 3 }">杂项</c:if>
					</td>
					<td><a href="search?id=${item.id}">修改</a>&nbsp;<a
						href="javascript:if(confirm('是否确认删除')){location.href='delete?id=${item.id }';}">删除</a>
					</td>
				</tr>
			</c:forEach>
		</table>
		<p>
			<a href="add.jsp">新增</a>
		</p>
	</div>
</body>
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>添加图书</title>
<style type="text/css">
*{font-size:14px;font-family:"宋体";color:#333;line-height:24px;margin:0;}
div{width:420;margin:20px auto;;}
.addBook{font-size:22px;font-weight:bold;}
.text{height:22px;line-height:22px;border:1px #333 solid;}
select{border:1px #333 solid;}
</style>
</head>

<body>
	<div>
		<form action="add" method="post">
			<table>
				<tr>
					<td></td>
					<td class="addBook">新增图书</td>
				</tr>
				<tr>
					<td>图书名称</td>
					<td><input type="text" name="name" id="name" class="text">
					</td>
				</tr>
				<tr>
					<td>图书作者</td>
					<td><input type="text" name="author" id="author" class="text">
					</td>
				</tr>
				<tr>
					<td>购买日期</td>
					<td><input type="text" name="time" id="time" class="text">
					</td>
				</tr>
				<tr>
					<td>图书类别</td>
					<td><select name="type" id="type">
							<option value="0">==请选择类别==</option>
							<option value="1"
								<c:if test="${item.type eq 1 }">selected="selected"</c:if>>计算机/软件</option>
							<option value="2"
								<c:if test="${item.type eq 2 }">selected="selected"</c:if>>小说/文摘</option>
							<option value="3"
								<c:if test="${item.type eq 3 }">selected="selected"</c:if>>杂项</option>
					</select></td>
				</tr>
				<tr>
					<td></td>
					<td><input type="submit" name="btnAdd" value="添加图书"
						onclick="return checkInfo();" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	<script type="text/javascript">
		//验证方法
		function $(id) {
			return document.getElementById(id).value;
		}
		function checkInfo() {
			var name = $("name");
			var author = $("author");
			var time = $("time");
			var type = $("type");
			if (name == "" || author == "") {
				alert("图书名称和作者姓名不能为空");
				return false;
			} else {
				var reg = /^\d{4}-\d{2}-\d{2}$/;
				if (!reg.test(time)) {
					alert("时间格式错误");
					return false;
				} else if (type == "0") {
					alert("请选择图书分类");
					return false;
				}
			}
			return true;
		}
	</script>
</body>
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>修改图书</title>
<style type="text/css">
*{font-size:14px;font-family:"宋体";color:#333;line-height:24px;margin:0;}
div{width:420;margin:20px auto;;}
.addBook{font-size:22px;font-weight:bold;}
.text{height:22px;line-height:22px;border:1px #333 solid;}
select{border:1px #333 solid;}
</style>
</head>

<body>
	<div>
		<form action="update" method="post">
			<table>
				<tr>
					<td><input type="hidden" name="id" value="${item.id }">
					</td>
					<td class="addBook">修改图书</td>
				</tr>
				<tr>
					<td>图书名称</td>
					<td><input type="text" name="name" id="name" class="text"
						value="${item.name}">
					</td>
				</tr>
				<tr>
					<td>图书作者</td>
					<td><input type="text" name="author" id="author" class="text"
						value="${item.author}">
					</td>
				</tr>
				<tr>
					<td>购买日期</td>
					<td><input type="text" name="time" id="time" class="text"
						value="${item.time}">
					</td>
				</tr>
				<tr>
					<td>图书类别</td>
					<td><select name="type" id="type">
							<option value="0">==请选择类别==</option>
							<option value="1"
								<c:if test="${item.type eq 1 }">selected="selected"</c:if>>计算机/软件</option>
							<option value="2"
								<c:if test="${item.type eq 2 }">selected="selected"</c:if>>小说/文摘</option>
							<option value="3"
								<c:if test="${item.type eq 3 }">selected="selected"</c:if>>杂项</option>
					</select></td>
				</tr>
				<tr>
					<td></td>
					<td><input type="submit" name="btnAdd" value="修改图书"
						onclick="return checkInfo();" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	<script type="text/javascript">
		//验证方法
		function $(id) {
			return document.getElementById(id).value;
		}
		function checkInfo() {
			var name = $("name");
			var author = $("author");
			var time = $("time");
			var type = $("type");
			if (name == "" || author == "") {
				alert("图书名称和作者姓名不能为空");
				return false;
			} else {
				var reg = /^\d{4}-\d{2}-\d{2}$/;
				if (!reg.test(time)) {
					alert("时间格式错误");
					return false;
				} else if (type == "0") {
					alert("请选择图书分类");
					return false;
				}
			}
			return true;
		}
	</script>
</body>
</html>

 

效果图：






   

 

  • 大小: 24.9 KB
  • 大小: 14.6 KB
  • 大小: 11.9 KB
  • 大小: 12.3 KB
  • 大小: 12.6 KB
  • 大小: 39 KB
分享到：
| servlet 和 web配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics