zoukankan      html  css  js  c++  java
  • 双表的增删改查-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=" 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>

  • 相关阅读:
    git 分支报错: error: The following untracked working tree files would be overwritten by merge
    JSAPI唤起微信支付
    解决html body 元素在底部设置padding-bottom 或者margin-bottom失效的问题
    Java中的接口
    Java中的抽象类
    IDEA快捷键
    Java的访问控制权限修饰符
    Java中的包机制和import机制
    Java中的final关键字
    Java面向对象三大特征
  • 原文地址:https://www.cnblogs.com/liuzhaolong/p/12874581.html
Copyright © 2011-2022 走看看