一对多：1对多操作需要 select标签限制数据（因为有表中有 外键关系）
前端：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta harset="UTF-8"> 5 <title>模态对话框</title> 6 <script src="/static/zhanggen.js"></script> 7 </head> 8 <body> 9 <style> 10 td{text-align: center;width:80px;height: 60px} 11 .shadow{position: fixed;left: 0;right: 0;bottom: 0;top: 0;background-color:silver;z-index: 999;opacity: 0.4 } 12 .add_modal{position: fixed;width: 250px;height: 225px; margin-top:30px;margin-left:520px;background-color:white;z-index: 1000} 13 .haid{display: none} 14 .del_modal{width: 150px;height:150px;z-index:1000;margin-left: 300px;position: fixed;left: 240px;top: 150px;text-align: center } 15 .edit_modal{width: 300px;height:330px;background-color: silver;position:fixed;left: 240px;top:150px;text-align: center} 16 17 </style> 18 <table border="1" style="border:none"> 19 <tr> 20 <td>学号</td> 21 <td>姓名</td> 22 <td>班级</td> 23 <td colspan="3">模态对话框操作</td> 24 </tr> 25 26 {% for row in list %} 27 </tr> 28 <td>{{ row.id }}</td> 29 <td>{{ row.name }}</td> 30 <td>{{ row.title }}</td> 31 <td><a href="#" onclick="show_modal(this)">添加</a></td> 32 <td id="del_s"><a href="#" onclick="modal_del(this)">删除</a> </td> 33 <td><a href="#"onclick="modal_edit(this)">编辑</a></td> 34 </tr> 35 36 {% endfor %} 37 38 {#模态对话框的对遮罩层#} 39 <div class="shadow haid" id="s"></div> 40 41 {#增加的模特对话框#} 42 <div class="add_modal haid" id="m"> 43 <p>所属班级： 44 <select id="66"> 45 </select> 46 </p> 47 <p>姓名：<input type="text" id="name7"></p> 48 <div id="flage" style="color: red"></div> 49 <p><input id="77" type="button"value="提交"></p> 50 <p><input id="cancel" type="button"value="取消" onclick="cancel()"></p> 51 </div> 52 </table> 53 54 {#删除的模态对话框#} 55 <div id="del" class="del_modal haid"style="background-color:gray"> 56 <p>真的要删除吗？</p> 57 <input id="y" style= "float: left; padding-left:10px;padding-right: 10px " type="button" value="确定"> 58 <input id="n" style=" float: right;padding-left: 10px;padding-right: 10px" type="button" value="取消"> 59 </div> 60 61 62 {#编辑的模态对话框#} 63 <div style="border: none" id="edit_mod" class="haid edit_modal"> 64 <p class="haid">ID：<input type="text" id="I"></p> 65 <p>姓名：<input type="text" id="N"></p> 66 <p style="margin-left:10px">所属班级 67 <select name="w" id="1993"> 68 </select> 69 </p> 70 <input id="1987" type="button" value="提交"> 71 <input type="button" value="取消" onclick="cancel()"> 72 </div> 73 74 </body> 75 76 77 78 79 <script> 80 {# 添加操作，触发的模态对话框#} 81 function show_modal(self) { 82 document.getElementById("s").classList.remove("haid") 83 document.getElementById("m").classList.remove("haid") 84 $.ajax({ 85 url:"/modal_add/", 86 type:"POST", 87 data:{"request":"give_class" }, 88 success:function(data){ 89 $('#66').html(data) }}) 90 ele777=document.getElementById("77") 91 ele777.onclick=function () { 92 $.ajax({ 93 url:'/modal_add/', 94 type:"POST", 95 data:{"name":$("#name7").val(),"cid": $('#66').val()}, 96 success:function (data) { 97 if(data=="xxoo"){location.href="/modal/"} 98 else{($('#flage').text("用户名/密码错误"))} 99 }})}} 100 101 {# 取消按钮触发的事件 #} 102 function cancel() { 103 location.href="/modal/" 104 } 105 106 {#删除操作 触发 模态对话框的 确认按钮 onclick事件 进而触发 ajanx请求服务端 #} 107 function modal_del(self) { 108 id1=$(self).parent().siblings().eq(0).text(); 109 $("#del").removeClass("haid"); 110 ele=document.getElementById("y"); 111 ele.onclick=function () { 112 $.ajax({ 113 url: '/modal_del/', 114 type: 'POST', 115 data:{"id":id1}, 116 success:function (data) { 117 if (data == "OK"){location.href="/modal/"} 118 }})} 119 ele1=document.getElementById("n"); 120 ele1.onclick=function () {location.href="/modal/"} } 121 122 function modal_edit(self) { 123 id=$(self).parent().siblings().eq(0).text(); 124 name=$(self).parent().siblings().eq(1).text(); 125 cid=$(self).parent().siblings().eq(2).text(); 126 $("#edit_mod").removeClass("haid"); 127 $('#I').val(id) 128 $('#N').val(name) 129 $.ajax({ 130 url:'/modal_edit/', 131 type:"POST", 132 data:{"id":id}, 133 success:function(data){ $("#1993").html(data); 134 $('#edit_mod').removeClass("haid")}}) 135 {# 给编辑对话栏的提交按钮动态添加事件#} 136 ele=document.getElementById("1987"); 137 ele.onclick=function () { console.log("ok") 138 $.ajax({ 139 url:'/modal_edit/', 140 type:"GET", 141 data:{"id":($('#I').val()),"name":$('#N').val(),"class_id":$("#1993").val()}, 142 success:function(data){ 143 console.log(data) 144 if (data=='ok') 145 {location.href="/modal/"}}})} 146 } 147 148 </script> 149 150 </html>