jQuery练习：表单模态框
生活随笔
收集整理的這篇文章主要介紹了
jQuery练习：表单模态框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼：基于事件冒泡原理和事件委托
<!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><title>Title</title><style>body {background-color: rgb(238, 238, 238);}.clearfix:before {content: "";display: block;clear: both;}.hide {display: none;}/*table樣式*/button {margin-right: 10px;}.btn-edit,.btn-del {margin: 0;padding: 2px;border: 1px solid gray;}#btn-add:hover,.btn-edit:hover,.btn-del:hover {color: indianred;}#btn-add, .btn-edit, .btn-del {background-color: silver;}/*modal樣式*/.container-outer {border: 1px solid silver;width: 320px;height: 180px;background-color: rgb(238, 238, 238);margin: 0 auto;}.container-inner {width: 173px;margin: 0 auto;padding-top: 20px;}#modal-name,#modal-hobby,#btn-modal-submit,#btn-modal-cancel {line-height: 20px;}#btn-modal-submit,#btn-modal-cancel {background-color: rgb(51, 122, 183);border-radius: 10px;color: white;margin: 0;}#btn-modal-submit {float: left;}#btn-modal-cancel {float: right;}</style> </head> <body><button id="btn-add">新增</button> <table id="tb1" border="1" cellspacing="0" cellpadding="0"><thead><tr><th>id</th><th>name</th><th>hobby</th><th colspan="2">action</th></tr></thead><tbody><tr><td>1</td><td>pd</td><td>swimming</td><td class="td"><button class="btn-edit">編輯</button></td><td class="td"><button class="btn-del">刪除</button></td></tr><tr><td>2</td><td>pd</td><td>python</td><td class="td"><button class="btn-edit">編輯</button></td><td class="td"><button class="btn-del">刪除</button></td></tr></tbody> </table><div class="container-outer hide"><div class="container-inner clearfix hide"><p><label for="modal-name"></label><input type="text" id="modal-name" placeholder="姓名"></p><p><label for="modal-hobby"></label><input type="text" id="modal-hobby" placeholder="愛好"></p><span><button id="btn-modal-submit">submit</button><button id="btn-modal-cancel">cancel</button></span></div> </div><script type="text/javascript" src="https://blog-static.cnblogs.com/files/believepd/jquery-3.3.1.min.js"></script> <script>// 定義一個彈出模態框的函數function showModal() {$(".container-outer,.container-inner").removeClass("hide");}// 定義一個隱藏模態框的函數function hideModal() {$(".container-outer,.container-inner").addClass("hide");$("#modal-name,#modal-hobby").val("");}// 給新增按鈕綁定事件 $("#btn-add").on("click", function () {showModal();});// 模態框中的取消按鈕綁定事件 $("#btn-modal-cancel").on("click", function () {hideModal();});// 新增與編輯 $("#btn-modal-submit").on("click", function () {// 取到用戶填寫的input框的值 let val_name = $("#modal-name").val();let val_hobby = $("#modal-hobby").val();// 取到（之前保存的當前行） let $currentTrEle = $("#tb1").data("currentTrEle");// 判斷狀態if ($currentTrEle !== undefined) {// 說明是編輯狀態 $currentTrEle.children().eq(1).text(val_name);$currentTrEle.children().eq(2).text(val_hobby);// 調用函數隱藏模態框 hideModal();// 清空（之前保存的當前行） $("table").removeData();}else {// 創建tr標簽，把數據填進去 let trEle = document.createElement("tr");let num = $("tr").length;$(trEle).html("<td>"+num+"</td><td>"+val_name+"</td><td>"+val_hobby+"</td><td class=\"td\">" +"<button class=\"btn-edit\">編輯</button></td><td class=\"td\"><button class=\"btn-del\">刪除" +"</button></td>");$("#tb1").append(trEle);// 調用函數隱藏模態框 hideModal();}});// 給每一行的編輯按鈕綁定事件// 使用事件委托，基于已存在的元素（頁面加載完之后存在的標簽）綁定事件 $("#tb1").on("click", ".btn-edit",function () {// 調用顯示模態框函數 showModal();let $currentTrEle = $(this).parent().parent();// 把當前行的jQuery對象保存起來 $("table").data("currentTrEle",$currentTrEle);let name = $currentTrEle.children().eq(1).text();let hobby = $currentTrEle.children().eq(2).text();$("#modal-name").val(name);$("#modal-hobby").val(hobby);});// 給每一行的刪除按鈕綁定事件 $("#tb1").on("click", ".btn-del",function () {// 刪除（被點擊的刪除按鈕的那一行） let $currentTrEle = $(this).parent().parent();// 更新序號// 找到當前行后面的所有的tr，依次更新序號 $currentTrEle.nextAll().each(function () {// 取到原來的序號 let oldNum = $(this).children().first().text();// 將原來的序號-1,再賦值回去 $(this).children().first().text(oldNum-1);});$currentTrEle.remove();}); </script></body> </html> View Code效果：
新增狀態：
編輯狀態：
?
轉載于:https://www.cnblogs.com/believepd/p/9833331.html
總結
以上是生活随笔為你收集整理的jQuery练习：表单模态框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浅谈前端实现页面加载进度条以及 npro
- 下一篇： linux systemd 使用