双表的增删改查-list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/index2.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="container">
<form action="/list" method="post" id="fid">
查询条件:
<table>
<tr>
<td>姓名:<input type="text" name="name" value="${d.name}">
性别:<select name="age">
<option value="1">男</option>
<option value="2">女</option>
</select> 省:<select name="province" onchange="shen()" id="shen">
<c:forEach items="${province}" var="d">
<option value="${d.id}">${d.sname}</option>
</c:forEach>
</select> 市: <select name="town" onchange="shi()" id="town">
</select>
县: <select name="county" onchange="xian()" id="county">
</select>
科室:<select name="desk">
<c:forEach items="${listDepart}" var="d">
<option value="${d.id}">${d.kname}</option>
</c:forEach>
</select>
<button class="btn btn-primary">搜索</button>
</td>
</tr>
</table>
</form>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">姓名</th>
<th scope="col">性别</th>
<th scope="col">生日</th>
<th scope="col">年龄</th>
<th scope="col">省</th>
<th scope="col">市</th>
<th scope="col">县</th>
<th scope="col">科室</th>
<th scope="col">擅长</th>
<th scope="col">工龄</th>
<th scope="col">头像</th>
<th scope="col">操作<button type="button" class="btn btn-secondary" onclick="tj()">添加</button></th>
</tr>
</thead>
<tbody>
<c:forEach items="${info.list}" var="d">
<tr>
<th scope="row">${d.name}</th>
<td>${d.grader==1?"男":"女"}</td>
<td>${d.birthday}</td>
<td>${d.age}</td>
<td>${d.sname}</td>
<td>${d.cname}</td>
<td>${d.xname}</td>
<td>${d.kname}</td>
<td>${d.scname}</td>
<td>${d.gl}</td>
<td><img alt="无头像" src="/pic/${d.touxiang}"
style="width: 60px; height: 40px"></td>
<td>
<button type="button" class="btn btn-success" onclick="xg(${d.id})" >修改</button>
<button type="button" class="btn btn-danger">删除</button>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<a href="list?pageNum=1">首页</a>
<a href="list?pageNum=${info.pageNum-1 }">上一页</a>
<a href="list?pageNum=${info.pageNum+1 }">下一页</a>
<a href="list?pageNum=${info.pages }">尾页</a>
</div>
</body>
<script type="text/javascript">
function tj() {
location.href="/add";
}
function xg(id){
location.href="/update?id="+id;
}
function shen() {
var id = $("#shen").val();
$.ajax({
url:'/city',
data:{id:id},
type:'post',
dataType:'JSON',
success:function(obj){
$("#town").empty();
for ( var i in obj) {
$("#town").append("<option value="+obj[i].id+" >"+obj[i].sname+"</option>")
}
}
})
}
function shi() {
var id = $("#town").val();
$.ajax({
url:'/city',
data:{id:id},
type:'post',
dataType:'JSON',
success:function(obj){
$("#county").empty();
for ( var i in obj) {
$("#county").append("<option value="+obj[i].id+" >"+obj[i].sname+"</option>")
}
}
})
}
</script>
</html>
