期中测试人口普查jsp界面
作者：互联网
1.登陆界面
index.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<style>
.a{
font-size: 26px;
margin-top: 20px;
}
</style>
</head>
<body>
<div align="center">
<h1 style="color:blue;">信息管理</h1>
<div class="a">
<a href="add.jsp">人口登记</a>
</div>
<div class="a">
<a href="BillServlet?method=modifylist">修改人口信息</a>
</div>
<div class="a">
<a href="BillServlet?method=dellist">删除人口信息</a>
</div>
<div class="a">
<a href="search.jsp">查询人口信息</a>
</div>
<div class="a">
<a href="BillServlet?method=looklist">人口信息浏览</a>
</div>
</div>
</body>
</html>
2.人口登记
add.jap
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人口登记</title>
<style>
.a{
margin-top: 20px;
}
.b{
font-size: 20px;
width: 160px;
color: white;
background-color: greenyellow;
}
</style>
</head>
<body>
<%
Object message = request.getAttribute("message");
if(message!=null && !"".equals(message)){
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%} %>
<div align="center" id="div1">
<h1 style="color: red;">人口登记</h1>
<form action="BillServlet?method=add" name="information" method="post" onsubmit="return check()">
<div class="a">
<label>户别：</label>
<input type="radio" name="gender" value="家庭户" checked="checked"/>家庭户
<input type="radio" name="gender" value="集体户"/>集体户
</div>
<div class="a">
<label>住房类型：</label>
<input type="radio" name="house" value="家庭住宅" checked="checked"/>家庭住宅
<input type="radio" name="house" value="集体住所"/>集体住所
<input type="radio" name="house" value="工作地住所"/>工作地住所
<input type="radio" name="house" value="其他住宅"/>其他住宅
<input type="radio" name="house" value="无住宅"/>无住宅
</div>
<div class="a">
本户现住房面积:<input type="text" id="sqare" name="sqare"runat="server" maxlength="100" size="10" onblur="if(/[^0-9]/.test(this.value)){alert('Error');}" />平方米
</div>
<div class="a">
本户现住房间数:<input type="text" id="jian" name="jian" runat="server" maxlength="100" size="10" onblur="if(/[^0-9]/.test(this.value)){alert('Error');}" />间
</div>
<div class="a">
房主姓名:<input type="text" id="owname" name="owname"/>
</div>
<div class="a">
身份证号码:<input type="text" id="idcard" name="idcard" maxlength="13" onKeyUp="value=value.replace(/[\W]/g,'')"/>
</div>
<div class="a">
<label>性别：</label>
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女
</div>
<div class="a">
民族<input type="text" id="zu" name="zu"/>
</div>
<div class="form-group">
<label for="address">受教育程度：</label>
<select name="address" class="form-control" id="address">
<option value="研究生">研究生</option>
<option value="大学本科">大学本科</option>
<option value="大学专科">大学专科</option>
<option value="高中">高中</option>
<option value="初中">初中</option>
<option value="小学">小学</option>
<option value="未上过学">未上过学</option>
</select>
</div>
<div class="a">
<button type="submit" class="b">保 存</button>
</div>
<div class="a">
<a href="index.jsp" >返回</a>
</div>
</form>
</div>
<script Language="javaScript">
function check() {
if (document.information.sqare.value == "") {
alert("住房面积不能为空.");
document.information.sqare.focus();
return false;
}
if (document.information.jian.value == "") {
alert("房间数不能为空.");
document.information.jian.focus();
return false;
}
if (document.information.owname.value == "") {
alert("房主姓名不能为空.");
document.information.owname.focus();
return false;
}
if (document.information.idcard.value == "") {
alert("身份证号不能为空.");
document.information.idcard.focus();
return false;
}
if (document.information.zu.value == "") {
alert("民族不能为空.");
document.information.zu.focus();
return false;
}
var a=document.information.idcard.value.length;
if(a!=13)
{
alert("身份证位数应为13位.");
document.information.idcard.focus();
return false;
}
var reg = /^[0-9]+.?[0-9]*$/;
/*for(var i=0;i<a;i++)
{
if (reg.test(document.information.idcard.value.charCodeAt(i))) {}
else if(document.information.idcard.value.charCodeAt(i)==X&&i==12){}
else if(document.information.idcard.value.charCodeAt(i)==x&&i==12){}
else{
alert("身份证输入非法字符");
document.information.idcard.focus();
return false;
}
}*/
return true;
}
</script>
</body>
</html>
3.修改人口信息
modifylist.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.a{
margin-top: 20px;
}
.b{
font-size: 20px;
width: 160px;
color: white;
background-color: greenyellow;
}
.tb, td {
border: 1px solid black;
font-size: 22px;
}
</style>
</head>
<body>
<%
Object message = request.getAttribute("message");
if(message!=null && !"".equals(message)){
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%} %>
<div align="center">
<h1 style="color: red;">修改信息</h1>
<a href="index.jsp">返回主页</a>
<table class="tb">
<tr>
<td>户别</td>
<td>住房类型</td>
<td>本户现住房面积</td>
<td>本户现住房间数</td>
<td>户主姓名</td>
<td>身份证号</td>
<td>性别</td>
<td>民族</td>
<td>受教育程度</td>
<td align="center" colspan="2">操作</td>
</tr>
<c:forEach items="${bills}" var="item">
<tr>
<td>${item.gender}</td>
<td>${item.house}</td>
<td>${item.sqare}</td>
<td>${item.jian}</td>
<td>${item.owname}</td>
<td>${item.idcard}</td>
<td>${item.sex}</td>
<td>${item.zu}</td>
<td>${item.address}</td>
<td><a href="BillServlet?method=getbillbyidcard2&idcard=${item.idcard}">修改</a></td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
modify.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.a{
margin-top: 20px;
}
.b{
font-size: 20px;
width: 160px;
color: white;
background-color: greenyellow;
}
</style>
</head>
<body>
<%
Object message = request.getAttribute("message");
if(message!=null && !"".equals(message)){
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%} %>
<div align="center">
<h1 style="color: cyan;">修改</h1>
<form action="BillServlet?method=modify&oldidcard=${bill.idcard}" method="post" onsubmit="return check()">
<div class="a">
<label>户别：</label>
<c:if test="${bill.gender=='家庭户'}">
<input type="radio" name="gender" value="家庭户" checked/>家庭户
<input type="radio" name="gender" value="集体户" />集体户
</c:if>
<c:if test="${bill.gender=='集体户'}">
<input type="radio" name="gender" value="家庭户" />家庭户
<input type="radio" name="gender" value="集体户" checked/>集体户
</c:if>
</div>
<div class="a">
<label>住房类型：</label>
<c:if test="${bill.house=='家庭住宅'}">
<input type="radio" name="house" value="家庭住宅" checked="checked"/>家庭住宅
<input type="radio" name="house" value="集体住所"/>集体住所
<input type="radio" name="house" value="工作地住所"/>工作地住所
<input type="radio" name="house" value="其他住宅"/>其他住宅
<input type="radio" name="house" value="无住宅"/>无住宅
</c:if>
<c:if test="${bill.house=='集体住所'}">
<input type="radio" name="house" value="家庭住宅" />家庭住宅
<input type="radio" name="house" value="集体住所" checked="checked"/>集体住所
<input type="radio" name="house" value="工作地住所"/>工作地住所
<input type="radio" name="house" value="其他住宅"/>其他住宅
<input type="radio" name="house" value="无住宅"/>无住宅
</c:if>
<c:if test="${bill.house=='工作地住所'}">
<input type="radio" name="house" value="家庭住宅" />家庭住宅
<input type="radio" name="house" value="集体住所" />集体住所
<input type="radio" name="house" value="工作地住所" checked="checked"/>工作地住所
<input type="radio" name="house" value="其他住宅"/>其他住宅
<input type="radio" name="house" value="无住宅"/>无住宅
</c:if>
<c:if test="${bill.house=='其他住宅'}">
<input type="radio" name="house" value="家庭住宅" />家庭住宅
<input type="radio" name="house" value="集体住所" />集体住所
<input type="radio" name="house" value="工作地住所" />工作地住所
<input type="radio" name="house" value="其他住宅" checked="checked"/>其他住宅
<input type="radio" name="house" value="无住宅"/>无住宅
</c:if>
<c:if test="${bill.house=='无住宅'}">
<input type="radio" name="house" value="家庭住宅" />家庭住宅
<input type="radio" name="house" value="集体住所" />集体住所
<input type="radio" name="house" value="工作地住所" />工作地住所
<input type="radio" name="house" value="其他住宅" />其他住宅
<input type="radio" name="house" value="无住宅" checked="checked"/>无住宅
</c:if>
</div>
<div class="a">
本户现住房面积:<input type="text" id="sqare" name="sqare" value="${bill.sqare}"/>平方米
</div>
<div class="a">
本户现住房间数:<input type="text" id="jian" name="jian" value="${bill.jian}" onblur="if(/[^0-9]/.test(this.value)){alert('Error');}"/>间
</div>
<div class="a">
房主姓名:<input type="text" id="owname" name="owname" value="${bill.owname}" onblur="if(/[^0-9]/.test(this.value)){alert('Error');}"/>
</div>
<div class="a">
身份证号码:<input type="text" id="idcard" name="idcard" value="${bill.idcard}" onKeyUp="value=value.replace(/[\W]/g,'')"/>
</div>
<div class="a">
<label>性别：</label>
<c:if test="${bill.sex=='男'}">
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女
</c:if>
<c:if test="${bill.sex=='女'}">
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女" checked="checked"/>女
</c:if>
</div>
<div class="a">
民族<input type="text" id="zu" name="zu" value="${bill.zu}"/>
</div>
<div class="form-group">
<label for="address">受教育程度：</label>
<select name="address" class="form-control" id="address">
<c:if test="${bill.address=='研究生'}">
<option value="研究生" selected>研究生</option>
<option value="大学本科">大学本科</option>
<option value="大学专科">大学专科</option>
<option value="高中">高中</option>
<option value="初中">初中</option>
<option value="小学">小学</option>
<option value="未上过学">未上过学</option>
</c:if>
<c:if test="${bill.address=='大学本科'}">
<option value="研究生" >研究生</option>
<option value="大学本科" selected>大学本科</option>
<option value="大学专科">大学专科</option>
<option value="高中">高中</option>
<option value="初中">初中</option>
<option value="小学">小学</option>
<option value="未上过学">未上过学</option>
</c:if>
<c:if test="${bill.address=='大学专科'}">
<option value="研究生" >研究生</option>
<option value="大学本科">大学本科</option>
<option value="大学专科" selected>大学专科</option>
<option value="高中">高中</option>
<option value="初中">初中</option>
<option value="小学">小学</option>
<option value="未上过学">未上过学</option>
</c:if>
<c:if test="${bill.address=='高中'}">
<option value="研究生" >研究生</option>
<option value="大学本科">大学本科</option>
<option value="大学专科">大学专科</option>
<option value="高中" selected>高中</option>
<option value="初中">初中</option>
<option value="小学">小学</option>
<option value="未上过学">未上过学</option>
</c:if>
<c:if test="${bill.address=='初中'}">
<option value="研究生" >研究生</option>
<option value="大学本科">大学本科</option>
<option value="大学专科">大学专科</option>
<option value="高中">高中</option>
<option value="初中" selected>初中</option>
<option value="小学">小学</option>
<option value="未上过学">未上过学</option>
</c:if>
<c:if test="${bill.address=='小学'}">
<option value="研究生" >研究生</option>
<option value="大学本科">大学本科</option>
<option value="大学专科">大学专科</option>
<option value="高中">高中</option>
<option value="初中">初中</option>
<option value="小学" selected>小学</option>
<option value="未上过学">未上过学</option>
</c:if>
<c:if test="${bill.address=='未上过学'}">
<option value="研究生" >研究生</option>
<option value="大学本科">大学本科</option>
<option value="大学专科">大学专科</option>
<option value="高中">高中</option>
<option value="初中">初中</option>
<option value="小学">小学</option>
<option value="未上过学" selected>未上过学</option>
</c:if>
</select>
</div>
<div class="a">
<button type="submit" class="b">保 存</button>
</div>
<div class="a">
<a href="index.jsp" >返回</a>
</div>
</form>
</div>
<script Language="javaScript">
function check() {
if (document.information.sqare.value == "") {
alert("住房面积不能为空.");
document.information.sqare.focus();
return false;
}
if (document.information.jian.value == "") {
alert("房间数不能为空.");
document.information.jian.focus();
return false;
}
if (document.information.owname.value == "") {
alert("房主姓名不能为空.");
document.information.owname.focus();
return false;
}
if (document.information.idcard.value == "") {
alert("身份证号不能为空.");
document.information.idcard.focus();
return false;
}
if (document.information.zu.value == "") {
alert("民族不能为空.");
document.information.zu.focus();
return false;
}
var a=document.information.idcard.value.length;
if(a!=13)
{
alert("身份证位数应为13位.");
document.information.idcard.focus();
return false;
}
/*var reg = /^[0-9]+.?[0-9]*$/;
for(var i=0;i<a;i++)
{
if (reg.test(document.information.idcard.value.charCodeAt(i))) {}
else if(document.information.idcard.value.charCodeAt(i)==X&&i==12){}
else if(document.information.idcard.value.charCodeAt(i)==x&&i==12){}
else{
alert("身份证输入非法字符");
document.information.idcard.focus();
return false;
}
}*/
return true;
}
</script>
</body>
</html>
4.删除人口信息
dellist.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.a{
margin-top: 20px;
}
.b{
font-size: 20px;
width: 160px;
color: white;
background-color: greenyellow;
}
.tb, td {
border: 1px solid black;
font-size: 22px;
}
</style>
</head>
<body>
<%
Object message = request.getAttribute("message");
if(message!=null && !"".equals(message)){
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%} %>
<div align="center">
<h1 style="color: red;">删除信息</h1>
<a href="index.jsp">返回主页</a>
<table class="tb">
<tr>
<td>户别</td>
<td>住房类型</td>
<td>本户现住房面积</td>
<td>本户现住房间数</td>
<td>户主姓名</td>
<td>身份证号</td>
<td>性别</td>
<td>民族</td>
<td>受教育程度</td>
<td align="center" colspan="2">操作</td>
</tr>
<c:forEach items="${bills}" var="xm">
<tr>
<td>${xm.gender}</td>
<td>${xm.house}</td>
<td>${xm.sqare}</td>
<td>${xm.jian}</td>
<td>${xm.owname}</td>
<td>${xm.idcard}</td>
<td>${xm.sex}</td>
<td>${xm.zu}</td>
<td>${xm.address}</td>
<td><a href="BillServlet?method=getbillbyidcard&idcard=${xm.idcard}">删除</a></td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
delete.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.a{
margin-top: 20px;
}
.b{
font-size: 20px;
width: 160px;
color: white;
background-color: greenyellow;
}
.tb, td {
border: 1px solid black;
font-size: 22px;
}
</style>
</head>
<body>
<%
Object message = request.getAttribute("message");
if(message!=null && !"".equals(message)){
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%} %>
<div align="center">
<h1 style="color: red;">信息删除</h1>
<a href="index.jsp">返回主页</a>
<table class="tb">
<tr>
<td>户别</td>
<td>${bill.gender}</td>
</tr>
<tr>
<td>住房类型</td>
<td>${bill.house}</td>
</tr>
<tr>
<td>住房面积</td>
<td>${bill.sqare}</td>
</tr>
<tr>
<td>房间数</td>
<td>${bill.jian}</td>
</tr>
<tr>
<td>户主姓名</td>
<td>${bill.owname}</td>
</tr>
<tr>
<td>身份证号</td>
<td>${bill.idcard}</td>
</tr>
<tr>
<td>性别</td>
<td>${bill.sex}</td>
</tr>
<tr>
<td>民族</td>
<td>${bill.zu}</td>
</tr>
<tr>
<td>受教育程度</td>
<td>${bill.address}</td>
</tr>
</table>
<div class="a">
<a onclick="return check()" href="BillServlet?method=delete&idcard=${bill.idcard}">删 除</a>
</div>
</div>
<script type="text/javascript">
function check() {
if (confirm("真的要删除吗？")){
return true;
}else{
return false;
}
}
</script>
</body>
</html>
5.查询人口信息
search,jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.a{
margin-top: 20px;
}
.b{
font-size: 20px;
width: 160px;
color: white;
background-color: greenyellow;
}
</style>
</head>
<body>
<div align="center">
<h1 style="color: cyan;">信息查询</h1>
<form action="BillServlet?method=search" method="post" onsubmit="return check()">
<div class="a">
房主姓名:<input type="text" id="owname" name="owname"/>
</div>
<div class="a">
<label>性别：</label>
<input type="radio" name="sex" value="" checked="checked"/>无限制
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</div>
<div class="a">
民族<input type="text" id="zu" name="zu"/>
</div>
<div class="form-group">
<label for="address">受教育程度：</label>
<select name="address" class="form-control" id="address">
<option value="">无限制</option>
<option value="研究生">研究生</option>
<option value="大学本科">大学本科</option>
<option value="大学专科">大学专科</option>
<option value="高中">高中</option>
<option value="初中">初中</option>
<option value="小学">小学</option>
<option value="未上过学">未上过学</option>
</select>
</div>
<div class="a">
<button type="submit" class="b">查 询</button>
</div>
<div class="a">
<a href="index.jsp" >返回</a>
</div>
</form>
</div>
</body>
</html>
searchlist.jap
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.a{
margin-top: 20px;
}
.b{
font-size: 20px;
width: 160px;
color: white;
background-color: greenyellow;
}
.tb, td {
border: 1px solid black;
font-size: 22px;
}
</style>
</head>
<body>
<div align="center">
<h1 style="color: red;">账单信息列表</h1>
<a href="index.jsp">返回主页</a>
<a href="search.jsp">继续查询</a>
<table class="tb">
<tr>
<td>户主姓名</td>
<td>性别</td>
<td>民族</td>
<td>受教育程度</td>
</tr>
<!-- forEach遍历出adminBeans -->
<c:forEach items="${bills}" var="item" varStatus="status">
<tr>
<td><a href="BillServlet?method=getbillbyidcard3&idcard=${item.idcard}">${item.owname}</a></td>
<td>${item.sex}</td>
<td>${item.zu}</td>
<td>${item.address}</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
searesult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.a{
margin-top: 20px;
}
.b{
font-size: 20px;
width: 160px;
color: white;
background-color: greenyellow;
}
.tb, td {
border: 1px solid black;
font-size: 22px;
}
</style>
</head>
<body>
<%
Object message = request.getAttribute("message");
if(message!=null && !"".equals(message)){
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%} %>
<div align="center">
<h1 style="color: red;">详细信息</h1>
<a href="index.jsp">返回主页</a>
<table class="tb">
<tr>
<td>户别</td>
<td>${bill.gender}</td>
</tr>
<tr>
<td>住房类型</td>
<td>${bill.house}</td>
</tr>
<tr>
<td>住房面积</td>
<td>${bill.sqare}</td>
</tr>
<tr>
<td>房间数</td>
<td>${bill.jian}</td>
</tr>
<tr>
<td>户主姓名</td>
<td>${bill.owname}</td>
</tr>
<tr>
<td>身份证号</td>
<td>${bill.idcard}</td>
</tr>
<tr>
<td>性别</td>
<td>${bill.sex}</td>
</tr>
<tr>
<td>民族</td>
<td>${bill.zu}</td>
</tr>
<tr>
<td>受教育程度</td>
<td>${bill.address}</td>
</tr>
</table>
</div>
</body>
</html>
标签：information,color,bill,alert,期中,jsp,人口普查,document,20px 来源： https://www.cnblogs.com/linmob/p/14139418.html