上（四）-CSDN博客

本文链接：https://blog.csdn.net/qq_38505862/article/details/88974796

在没有引入CSS样式之前，页面是这样的

引入CSS样式之后的页面是这样的

CSS样式放在WebContent的新建文件夹CSS中。以下贴出user.jsp的相关代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 引入jst自定义的标签 -->
<c:set var="ctx" value="${pageContext.request.contextPath}" /> <!-- 起别名 -->
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户列表</title>
<link href="${ctx }/public.css" type="text/css" rel="stylesheet" />
<link href="${ctx }/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="${ctx }/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
<script src="${ctx }/js/jquery.min.js" type="text/javascript"></script>
<script src="${ctx }/js/bootstrap.min.js" type="text/javascript"></script> 

<link href="${ctx }/css/public.css" type="text/css" rel="stylesheet">

<script type="text/javascript">
function showAddDiv() {
	$(".box").show();
	
}
</script>
</head>

<body>
<!-- 先用DIV划分区域 -->
	<div class="banner"><!-- 最上面的那张图片 -->
		<div class="title">
			欢迎，<span id="user">（用户登录名）</span><a href="#">退出</a>
		</div>
	</div>
	
	<!-- 下面主题部分 -->
	<div id="main">
		<div id="left">
			<ul>
				<li>
					<img alt="icon1" src="${ctx}/img/icon01.png" />
					<a href="">用户管理</a>
				</li>
				<li>
					<img alt="icon1" src="${ctx}/img/icon09.png" />
					<a href="">修改密码</a>
				</li>
			</ul>
			
		</div>
		<div id="right">
			<button type="button" class="btn btn-primary" onclick="showAddDiv()">新增</button>
			<table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>id</th>
						<th>用户名</th>
						<th>真实姓名</th>
						<th>删除</th>
						<th>编辑</th>
					</tr>
				</thead>
				<tbody>
					<!-- EL表达式-翻课本 -->
					<!-- List<User> row.id 这个id就是后台传来的user里面的属性名 -->
					<c:forEach items="${users }" var="row">
						<tr>
							<td>${row.id }</td>
							<td>${row.username }</td>
							<td>${row.realname }</td>
							<td><a href="#" class="btn btn-primary" onclick="deleteUser(${row.id})">删除</a></td>
							<td><a href="#" class="btn btn_primary" onclick="edit(${row.id})">编辑</a></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</div>
	
	<!-- 新增对话框 -->
	<div class="box">
		<div id="loginDiv">
		    <p class="logTitle">新增</p>
		    <div>
		      <form id="saveForm" >
		      	<input type="hidden" name="id" id="id"	/>
		        <div class="formInput"> <span>用户名：</span>
		          <input type="text" name="username" id="username"	placeholder="" />
		        </div>
		        <div class="formInput"> <span>密码：</span>
		          <input type="password" name="pwd"	id="pwd"	placeholder="" />
		        </div>
		        <div class="formInput"> <span>真实姓名：</span>
		          <input type="text"	name="realname" id="realname"	placeholder="" />
		        </div>
		        <div class="formInput"> <span>性别：</span>
		          <select name="sex">
		            <option value="1">男</option>
		            <option value="2">女</option>
		          </select>
		        </div>
		        <div class="formInput"> 
		        	<span>角色：</span>
		          <select name="role">
		          	<option value="1">管理员</option>
		            <option value="2">客户</option>
		          </select>
		        </div> 
		          <input  class="formButton" type="button" value="保存" onClick="create()" />
		      </form>
		    </div>
		</div>
     </div>
	<!-- 新增对话框 -->
	
</body>
</html>

新增按钮的点击事件是“οnclick=(函数名)”，从<script>中写出这个函数。效果是，点击按钮，弹出新增的对话框。在css中，先使得<div>的 display =none;点击函数中用jquery方法使得 <div>显示出来。