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>
效果：
新增状态：
编辑状态：
