CRUD
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E6</title> <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css"> </head> <body> <div id="login"> <p> <input type="text" id="username" class="form-control" placeholder="账号" /> </p> <p> <input type="text" id="password" class="form-control" placeholder="密码" /> </p> <p><button class="btn btn-primary btn-block">登录</button></p> </div> <div id="studentINFO"></div> <div id="addStudent"></div> <div id="modifyStudent"></div> <div id="deleteStudent"></div> </body> </html> <script src="./jquery-3.6.4.js"></script> <script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script> <script></script> <script> $(document).ready(function () { login(); addStudedntINFO(); modifyStudedntINFO(); goBack(); deleteStudentINFO(); }) function login() { $("#login button").click(function () { var username = $("#username").val(); var password = $("#password").val(); $.ajax({ type: "post", url: "http://114.67.241.121:8088/user/login?" + "username=" + username + "&password=" + password, async: false, complete: function (data) { if (data.responseJSON.msg == "账号或密码错误") { alert("账号或密码错"); } else { var token = data.responseJSON.data.token; window.localStorage.setItem("token", token); $("#login").hide(); $("#studentINFO").append("<table height='80%' class='table table-striped table-bordered table-hover table-condensed'><tr><td>stuaddess</td><td>stugender</td><td>stugrade</td><td>stuid</td><td>stumajor</td><td>stuname</td><td>stunative</td><td>stuno</td><td>stuphone</td><td>操作</td></tr></table>"); refreshStudentINFO(); $("#studentINFO").before("<div align='center'><button id='add' class='btn btn-info'>添加</button></div>"); } }, }) }) } function refreshStudentINFO() { $.ajax({ type: "get", url: "http://114.67.241.121:8088/stu/list", headers: { 'Authorization': window.localStorage.getItem("token"), }, async: false, complete: function (data) { var studentList = data.responseJSON.data; $("#studentINFO tr").not(":first").remove(); for (var i = 0; i < studentList.length; i++) { $("#studentINFO table").append( "<tr>" + "<td>" + studentList[i].stuaddess + "</td>" + "<td>" + studentList[i].stugender + "</td>" + "<td>" + studentList[i].stugrade + "</td>" + "<td>" + studentList[i].stuid + "</td>" + "<td>" + studentList[i].stumajor + "</td>" + "<td>" + studentList[i].stuname + "</td>" + "<td>" + studentList[i].stunative + "</td>" + "<td>" + studentList[i].stuno + "</td>" + "<td>" + studentList[i].stuphone + "</td>" + "<td>" + "<button class='btn btn-warning'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>修改</button>" + "<button class='btn btn-danger'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span>删除</button>" + "</td>" + "</tr>" ); } } }) } function addStudedntINFO() { $("body").on("click", "#add", function () { console.log("!"); $("#studentINFO").hide(); $("#addStudent").show(); $("#addStudent").append( "<p>stuaddess: <input type='text' id='stuaddess' /></p>" + "<p>stugender: <input type='text' id='stugender' /></p>" + "<p>stugrade: <input type='text' id='stugrade' /></p>" + "<p>stuid: <input type='text' id='stuid' /></p>" + "<p>stumajor: <input type='text' id='stumajor' /></p>" + "<p>stuname: <input type='text' id='stuname' /></p>" + "<p>stunative: <input type='text' id='stunative' /></p>" + "<p>stuno: <input type='text' id='stuno' /></p>" + "<p>stuphone: <input type='text' id='stuphone' /></p>" + "<div><button style='float: left;' id='confirmAdd' class='btn btn-success'>添加</button> <button style='float: right;' class='goBack btn btn-default'>返回</button></div>" ); $("p").css({ "width": "200px" }); $("#confirmAdd").click(function () { $.ajax({ type: "post", url: "http://114.67.241.121:8088/stu/add", headers: { 'Authorization': window.localStorage.getItem("token"), "Content-Type": "application/json", }, async: false, data: JSON.stringify({ stuaddess: $("#stuaddess").val(), stugender: $("#stugender").val(), stugrade: $("#stugrade").val(), stuid: $("#stuid").val(), stumajor: $("#stumajor").val(), stuname: $("#stuname").val(), stunative: $("#stunative").val(), stuno: $("#stuno").val(), stuphone: $("#stuphone").val(), }), }) $("#addStudent").hide(); $("#addStudent").empty(); refreshStudentINFO(); $("#studentINFO").show(); }) }) } function modifyStudedntINFO() { $("body").on("click", "#studentINFO td button:nth-child(1)", function () { var currentRow = $(this).closest("tr"); var currentstuaddess = currentRow.find("td:eq(0)").text(); var currentstugender = currentRow.find("td:eq(1)").text(); var currentstugrade = currentRow.find("td:eq(2)").text(); var currentstuid = currentRow.find("td:eq(3)").text(); var currentstumajor = currentRow.find("td:eq(4)").text(); var currentstuname = currentRow.find("td:eq(5)").text(); var currentstunative = currentRow.find("td:eq(6)").text(); var currentstuno = currentRow.find("td:eq(7)").text(); var currentstuphone = currentRow.find("td:eq(8)").text(); console.log(currentstuid); $("#add").hide(); $("#studentINFO").hide(); $("#modifyStudent").show(); $("#modifyStudent").append( "<p>stuaddess: <input type='text' id='nstuaddess' /></p>" + "<p>stugender: <input type='text' id='nstugender' /></p>" + "<p>stugrade: <input type='text' id='nstugrade' /></p>" + "<p>stuid: " + currentstuid + "</p>" + "<p>stumajor: <input type='text' id='nstumajor' /></p>" + "<p>stuname: <input type='text' id='nstuname' /></p>" + "<p>stunative: <input type='text' id='nstunative' /></p>" + "<p>stuno: <input type='text' id='nstuno' /></p>" + "<p>stuphone: <input type='text' id='nstuphone' /></p>" + "<div><button style='float: left;' id='confirmModify' class='btn btn-success'>修改</button> <button style='float: right;' class='goBack btn btn-default'>返回</button></div>" ); $("p").css({ "width": "200px" }); $("#confirmModify").click(function () { $.ajax({ type: "post", url: "http://114.67.241.121:8088/stu/edit", headers: { 'Authorization': window.localStorage.getItem("token"), "Content-Type": "application/json", }, async: false, data: JSON.stringify({ "stuaddess": $("#nstuaddess").val(), "stugender": $("#nstugender").val(), "stugrade": $("#nstugrade").val(), "stuid": currentstuid, "stumajor": $("#nstumajor").val(), "stuname": $("#nstuname").val(), "stunative": $("#nstunative").val(), "stuno": $("#nstuno").val(), "stuphone": $("#nstuphone").val(), }), }) $("#modifyStudent").hide(); $("#modifyStudent").empty(); refreshStudentINFO(); $("#studentINFO").show(); }) }) } function goBack() { $("body").on("click", ".goBack", function () { $("#addStudent").hide(); $("#addStudent").empty(); $("#modifyStudent").hide(); $("#modifyStudent").empty(); $("#deleteStudent").hide(); $("#deleteStudent").empty(); refreshStudentINFO(); $("#studentINFO").show(); $("#add").show(); }) } function deleteStudentINFO() { $("body").on("click", "#studentINFO td button:nth-child(2)", function () { var currentRow = $(this).closest("tr"); var deleteStuid = currentRow.find("td:eq(3)").text(); $("#add").hide(); $("#studentINFO").hide(); $("#deleteStudent").show(); $("#deleteStudent").append("<div class='label label-danger' style='font-size:20px;'>确定删除?</div> <div id='confirmDelete' style='margin-top:20px;'><button class='btn btn-danger'>确定</button><button style='margin-left:20px;' class='goBack btn btn-default'>返回</button></div>"); $("#confirmDelete").css({ "margin-right": "25px", }); $("#confirmDelete button:nth-child(1)").on("click", function () { // console.log("1"); $.ajax({ type: "post", url: "http://114.67.241.121:8088/stu/del?stuid=" + deleteStuid, headers: { 'Authorization': window.localStorage.getItem("token"), }, async: false, }) $("#deleteStudent").hide(); $("#deleteStudent").empty(); refreshStudentINFO(); $("#studentINFO").show(); }) }) } </script> <style> #login, #studentINF, #addStudent, #modifyStudent, #deleteStudent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #studentINF { height: 80%; width: 80%; } </style>View Code
标签:function,currentRow,val,练习,平时,studentINFO,var,td From: https://www.cnblogs.com/Sealgost/p/ES.html