期中测试人口普查jsp界面

2024-03-07 21:29:03

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">查&nbsp;&nbsp;&nbsp;&nbsp;询</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>

 

上一篇：7.盒子模型.html


下一篇：padding和margin使用情景区别