<!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"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <title>Document</title> </head> <style> * { margin: 0; padding: 0; } .info { border: 3px solid gray; width: 580px; height: 100px; margin-top: 50px; margin-left: 20%; padding: 5px 5px; } input { width: 200px; height: 22px; margin-left: 5px; } #subBtn { margin-right: 8px; float: right; width: 50px; height: 25px; } .display { margin-top: 5px; margin-left: 20%; } table { border-collapse: collapse; } th, td { border: 3px solid gray; } th { font-size: 18px; font-weight: bold; text-align: center; } table #stuno { width: 80px; } table #studepart { width: 100px; } table #stuname { width: 70px; } table #stumajor { width: 80px; } table #option { width: 80px; } </style> <body> <div class="container"> <div class="info"> <label>學號:</label><input type="text" name="stuno" id="stuno" class="in"> <label>姓名:</label><input type="text" name="stuname" id="stuname" class="in"> <br> <br> <label>院系:</label><input type="text" name="studepart" id="studepart" class="in"> <label>專業:</label><input type="text" name="stumajor" id="stumajor" class="in"> <br> <button id="subBtn">保存</button> </div> <div class="display"> <table> <thead> <tr> <th id="stuno" name="stuno">學號</th> <th id="stuname" name="stuname">姓名</th> <th id="studepart" name="studepart">院系</th> <th id="stumajor" name="stumajor">專業</th> <th id="option"></th> </tr> </thead> <tbody id="tableList"></tbody> </table> </div> </div> </body> <script> let flag=0 function getStu() { $.ajax({ url: 'http://60.205.177.189:8080/stu/getAllStu', method: 'get', success: (res) => { res.data.forEach(e => { const item = `<tr><td id="stuno">${e.stuno}</td><td id="stuname">${e.stuname}</td><td id="studepart">${e.studepart}</td><td id="stumajor">${e.stumajor}</td><td id="option"><button data-id="${e.stuno}" onclick='edit(event)'>修改</button>|<button onclick='del(event)' data-id="${e.stuno}">刪除</button></td></tr>` $('#tableList').append(item) }); } }) } function edit(e) { flag=1 const childs = Array.from(e.target.parentNode.parentNode.childNodes).slice(0,-1) let inputs=document.getElementsByClassName("in") var i=0 for(const child of childs){ inputs[i].value=child.innerHTML i++ } $(".info #stuno").attr("disabled","disabled") } function del(e) { const form = { stuno: e.target.dataset.id } $.ajax({ method: 'post', url: 'http://60.205.177.189:8080/stu/delete/' + form.stuno, data: JSON.stringify(form), processData: false, crossDomain: true, contentType: 'application/json', success: (res) => { $("#tableList").html('') getStu() console.log(res) } }) } function clear(){ flag=0 let inputs=document.getElementsByClassName("in") var i=0 for(i;i<4;i++){ inputs[i].value='' } $(".info #stuno").removeAttr("disabled") } $(document).ready(() => { let subform = {} let editform = {} $("#subBtn").click(() => { $("input").each(function () { subform[$(this).attr('name')] = $(this).val() }) if(flag==0){ console.log(flag) $.ajax({ method: 'post', url: 'http://60.205.177.189:8080/stu/addStu', data: JSON.stringify(subform), processData: false, contentType: 'application/json', success: (res) => { console.log(res) $("#tableList").html("") getStu() clear() } }) }else{ $.ajax({ method: 'post', url:'http://60.205.177.189:8080/stu/update/'+subform.stuno, data: JSON.stringify(subform), processData: false, contentType: 'application/json', success: (res) => { console.log(res) $("#tableList").html("") getStu() clear() } }) } }) getStu() }) </script> </html>