jquery綜合練習--模態對話框傳值,刪除,新增表格行
阿新 • • 發佈：2019-02-19
oct edit var white console charset mage 提交 adding
效果示例:
個人的練習代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style> body{ margin: 0; padding: 0; } .cover{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #b0b0b0; opacity: 0.4; z-index: 2; } .modal{ width: 500px; height: 400px; position: fixed; z-index: 3; background-color: white; left: 50%; top: 40%; margin-left: -250px; margin-top: -200px; } .hide{ display: none; } </style> </head> <body> <div class="cover hide"></div> <div class="modal hide"> <div> <label for="name">姓名</label><input type="text" id="name"> </div> <div> <label for="hobby">愛好</label><input type="text" id="hobby"> </div> <button id="cancel">取消</button> <button id="submit">提交</button> </div> <button id="add">新增</button> <table border="1"> <thead> <tr> <td>#</td> <td>姓名</td> <td>愛好</td> <td colspan="2" style="text-align: center">操作</td> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>小明</td> <td id="t1">抽煙,喝酒,燙頭</td> <td><button class="move">刪除</button></td> <td><button class="edit">編輯</button></td> </tr> <tr> <td><input type="checkbox"></td> <td>貝吉塔</td> <td>修行,找布爾瑪吃東西</td> <td><button class="move">刪除</button></td> <td><button class="edit">編輯</button></td> </tr> <tr> <td><input type="checkbox"></td> <td>孫悟空</td> <td>吃飯去界王星修煉</td> <td><button class="move">刪除</button></td> <td><button class="edit">編輯</button></td> </tr> </tbody> </table> <script> // 新增按鈕 $("#add").click(function () { $("#name,#hobby").prop("value",""); $(".cover,.modal").removeClass("hide"); }); // 取消按鈕 $("#cancel").click(function () { $(".cover,.modal").addClass("hide"); }); //刪除行,用到事件委托,主要是因為新增的行不會自動添加按鈕事件 $("tbody").on("click",".move",function () { $(this).parent().parent().remove(); }); //提交 $("#submit").click(function () { var name = $("#name").val(); var hobby = $("#hobby").val(); if($("#submit").data("k")){ bt_edit = $("#submit").data("k"); bt_edit.parent().prev().prev().prev().text(name); bt_edit.parent().prev().prev().text(hobby); }else{ var s = "<tr>" + " <td><input type=\"checkbox\"></td>" + " <td>"+name+"</td>" + " <td>"+hobby+"</td>" + " <td><button class=\"move\">刪除</button></td>" + "<td><button>編輯</button></td></tr>"; $("tbody").append(s); } $(".cover,.modal").addClass("hide"); $("#submit").data("k",""); }); //編輯 $("tbody").on("click",".edit",function () { //設定一個標誌位 $("#submit").data("k",$(this)); var name = $(this).parent().prev().prev().prev().text(); var hobby = $(this).parent().prev().prev().text(); console.log(name); $("#name").val(name); $("#hobby").val(hobby); $(".cover,.modal").removeClass("hide"); }) </script> </body> </html>
jquery綜合練習--模態對話框傳值,刪除,新增表格行