前端文档(例)

* {
   margin: 0;
   padding: 0;
   list-style: none;
}

#div {
   display: flex;
}

#ul {
    width: 150px;
    height: 500px;
    border-right: 1px solid gainsboro;
    text-align: center;
}

#ul li {
    width: 150px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
 }

.a {
    border: 3px solid blue;
}

#box {
    width: 700px;
    height: 500px;
    overflow: hidden;
    margin-left: 10px;
    font-weight: bold;
}
h1 {
    margin: 15px 10px;
 }

#box div input {
    margin: 5px;
    height: 25px;
    line-height: 25px;
    font-size: 20px;
}

#box table {
     width: 80%;
     text-align: center;
     font-size: 25px;
 }

 #edit{
     display: none;
}

<div id='div'>
    <ul id="ul">
        <li><span>信息录入</span>&gt;</li>
        <li><span>学员列表</span>&gt;</li>
    </ul>
    <div id="box">
        <div>
            <h1>信息录入</h1>
            名称：<input type="text" id="name"><br>
            种类：<input type="text" id="type"><br>
            <input type="button" value="提交" id="add">
            <input type="button" value="确定修改" id="edit">
        </div>
            <div style="display: none;">
            <h1>信息列表</h1>
            <table border="1" cellspacing="0" id="bg" >
                   
            </table>
        </div>
    </div>
</div>

//tab切换
$("#ul li").click(function () {
    var i = $(this).index();
    $(this).children("span").addClass("a").end().siblings().find("span").removeClass("a");
    $("#box div").eq(i).show().siblings().hide();
});
//添加
$("#add").click(function () {
    if ($("#name").val() == '' || $("#type").val()=='') {
         alert("不能空");
     } else {
         var obj = {
           name: $("#name").val(),
           type: $("#type").val(),
           id: +new Date()
         }
         $.ajax({
           url: "/add",
           type: "post",
           data: obj,
           success: function (res) {
           show(res);
           $("#name").val('');
           $("#type").val('');
           }
         });
     }
});
//渲染
show();
function show() {
    $.ajax({
         url: "/find",
         type: "get",
         success: function (res) {
             var str = '';
             $.each(res.info, function (i, v) {
                 str += `
                  <tr>
                      <td>${v.name}</td>
                      <td>${v.type}</td>
                      <td>
                          <button οnclick="del('${v._id}')">删除</button>
                          <button οnclick="up('${v._id}')">修改</button>
                      </td>
                  </tr>
                      `
             });
             $("#bg").html(str);
         }
    });
}
//删除
function del(Id) {
    $.ajax({
         url: "/del",
         type: "get",
         data: {id:Id},
         success: function (res) {
              show();
         }
    });
}
//修改按钮
var pid;
function up(res) {
    $("#ul li").eq(0).children("span").addClass("a").end().siblings().find("span").removeClass("a");
    $("#box div").eq(0).show().siblings().hide();
    $("#edit").show();
    $("#add").hide();
    $("#name").val(res.name);
    $("#type").val(res.type);
    pid=id
}
//确定修改按钮
$("#edit").click(function () {
    $("#ul li").eq(1).children("span").addClass("a").end().siblings().find("span").removeClass("a");
    $("#box div").eq(1).show().siblings().hide();
    var obj = {
        name: $("#name").val(),
        type: $("#type").val(),
        id: pid
        }
    $.ajax({
        url: "/up",
        type: "post",
        data: obj,
        success: function (res) {
        show(res);
        $("#name").val('');
        $("#type").val('');
        $("#xy").show();
        $("#add").show();
        $("#edit").hide();
        }
    });
});

后端接口