利用模態框彈出，jQuery實現table的增刪改查。
阿新 • • 發佈：2018-12-14
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> <style> *{margin: 0px; padding: 0px;} i{font-style: normal;} .container{ width: 900px; margin: 50px auto; } .table{ width: 800px; border: 1px solid #DDDDDD; text-align: center; border-collapse: collapse; } td{ border: 1px solid #DDDDDD ; height: 40px; } .td_addbtn{ } .addbtn{ width: 40px; height: 25px; border-radius: 4px; background: #31708F; color: white; border: none; outline: none; cursor: pointer; } .delbtn{ width: 40px; height: 25px; border-radius: 4px; background: #8a6d3b; color: white; border: none; outline: none; cursor: pointer; } .movebtn{ width: 40px; height: 25px; border-radius: 4px; background: #843534; color: white; border: none; outline: none; cursor: pointer; } .viewbtn{ width: 40px; height: 25px; border-radius: 4px; background: #f0ad4e ; color: white; border: none; outline: none; cursor: pointer; } #addmodal{ position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,0.5); display: none; } #viewmodal{ position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,0.5); display: none; } #movemodal{ position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,0.5); display: none; } .modal-dialog{ position: relative; width: 500px; margin: 40px auto; background: white; border-radius: 5px; } .modal-header { padding: 15px; border-bottom: 1px solid #e5e5e5; } .modal-header>i{ font-weight: bold; color: #ADADAD; float: right; cursor: pointer; } .modal-body { position: relative; padding: 15px; } .modal-body input{ width: 300px; border-radius: 4px; border: 1px solid #DDDDDD; outline: none; padding: 10px; margin: 10px; } .modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; } .addbtn_ok{ width: 40px; height: 25px; border-radius: 4px; background: deepskyblue; color: white; border: none; outline: none; cursor: pointer; } .addbtn_no{ width: 40px; height: 25px; border-radius: 4px; background: darkslateblue; color: white; border: none; outline: none; cursor: pointer; } </style> </head> <body> <div class="container"> <table class="table "> <thead> <tr> <td>姓名</td> <td>姓別</td> <td>年齡</td> <td>操作</td> </tr> </thead> <tr> <td class="name">張三</td> <td class="sex">男</td> <td class="age">20</td> <td> <button class="delbtn ">刪除</button> <button class="movebtn ">修改</button> <button class="viewbtn ">檢視</button> </td> </tr> <tr> <td class="name">李四</td> <td class="sex">女</td> <td class="age">21</td> <td> <button class="delbtn ">刪除</button> <button class="movebtn ">修改</button> <button class="viewbtn ">檢視</button> </td> </tr> <tr> <td class="name">趙錢</td> <td class="sex">不男</td> <td class="age">22</td> <td> <button class="delbtn ">刪除</button> <button class="movebtn ">修改</button> <button class="viewbtn ">檢視</button> </td> </tr> <tr> <td class="name">孫李</td> <td class="sex">不女</td> <td class="age">23</td> <td> <button class="delbtn ">刪除</button> <button class="movebtn ">修改</button> <button class="viewbtn ">檢視</button> </td> </tr> <tfoot> <tr> <td colspan="4"> <button class="addbtn ">增加</button> </td> </tr> </tfoot> </table> <!--增加的模態框--> <div class="modal addfade" id="addmodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <i>X</i> <h4>會員管理</h4> </div> <div class="modal-body"> <p> 姓名：<input type="text" /> </p> <p> 姓別：<input type="text" /> </p> <p> 年齡：<input type="text" /> </p> </div> <div class="modal-footer"> <button class="addbtn_ok">確定</button> <button class="addbtn_no">取消</button> </div> </div> </div> </div> <!--修改的模態框--> <div class="modal movefade movemodal" id="movemodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <i>X</i> <h4>會員管理</h4> </div> <div class="modal-body"> <p> 姓名：<input type="text" /> </p> <p> 姓別：<input type="text" /> </p> <p> 年齡：<input type="text" /> </p> </div> <div class="modal-footer"> <button class="addbtn_ok">確定</button> <button class="addbtn_no">取消</button> </div> </div> </div> </div> <!--檢視的模態框--> <div class="modal viewfade" id="viewmodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <i>X</i> <h4>會員管理</h4> </div> <div class="modal-body"> <p> 姓名：<span></span> </p> <p> 姓別：<span></span> </p> <p> 年齡：<span></span> </p> </div> <div class="modal-footer"> <button class="addbtn_no">取消</button> </div> </div> </div> </div> </div> <script> $(function(){ //增加 var arrAdd=[] $(document).on("click",".addbtn",function(){ $(".addfade").fadeIn(600) }) //增加確定 $(document).on("click",".addbtn_ok",function(){ $(".addfade").fadeOut(600) arrAdd=[] $('#addmodal').find("input").each(function(){ arrAdd.push($(this).val()) }) var str='<tr><td class="name">'+arrAdd[0]+'</td><td class="sex">'+arrAdd[1]+'</td><td class="age">'+arrAdd[2]+'</td><td><button class="delbtn ">刪除</button> <button class="movebtn ">修改</button> <button class="viewbtn ">檢視</button></td></tr>' $("tbody").append(str) $('#addmodal').find("input").val('') }) $(document).on("click",".addbtn_no",function(){ $(".addfade").fadeOut(600) }) $(document).on("click",".modal-header i",function(){ $(".addfade").fadeOut(600) }) //刪除 var del=[] $(document).on("click",".delbtn",function(){ del=[] if(confirm("確定刪除嗎？")){ $(this).parents("tr").fadeOut(300) } }) //修改 var arrMove=[]; var _this = null ; $(document).on("click",".movebtn",function(){ arrMove=[] _this=$(this).parents("tr") $(".movefade").fadeIn(600) $(this).parent().siblings().each(function(){ arrMove.push($(this).text()) }) $(this).parents().find('.movemodal input').each(function(i){ $(this).val(arrMove[i]) }) }) //修改確定 $(document).on("click",".addbtn_ok",function(){ arrMove=[] $(this).parent().siblings().find('input').each(function(){ arrMove.push($(this).val()) console.log($(this)) }) console.log(arrMove) $(this).parents().find('.movemodal input').each(function(i){ $(this).val(arrMove[i]) }) _this.find("td").each(function(i){ $(this).text(arrMove[i]) }) $(".movefade").fadeOut(600) }) //修改取消 $(document).on("click",".addbtn_no",function(){ $(".movefade").fadeOut(600) }) $(document).on("click",".modal-header i",function(){ $(".movefade").fadeOut(600) }) //檢視 var arrView=[] $(document).on("click",".viewbtn",function(){ arrView=[] $(".viewfade").fadeIn(600) $(this).parent().siblings().each(function(){ arrView.push($(this).text()) }) $(".modal-body").find("p span").each(function(i){ $(this).text(arrView[i]) console.log(arrView) }) }) //檢視取消 $(document).on("click",".addbtn_no",function(){ $(".viewfade").fadeOut(600) }) $(document).on("click",".modal-header i",function(){ $(".viewfade").fadeOut(600) }) }) </script> </body> </html>