jQuery提交表单，区分添加和编辑的不同操作 - 知否问答 - 万象云+社区

程序概述：

1、一个表单（显式）
2、一个模态框（隐式）：负责添加和编辑数据的功能
3、表单有添加，编辑，删除按钮

需求及问题：
添加功能和编辑功能是公用一个模态框，那么如何区分对待这两个功能的数据提交

源代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clone</title> <style> * { margin:0; padding:0; } .wrapper { background:rgba(0,0,0,.6); position:fixed; top:0; right:0; bottom:0; left:0; } .modal { position:absolute; top:50%; left:50%; width:200px; height:300px; margin-top:-150px; margin-left:-100px; background: silver; text-align: center; } .hide { display: none; } </style> </head> <body>  <button id="add">添加</button>  <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>lmj</td> <td>swim</td> <td> <input type="button" class="edit" value="编辑"> <input type="button" class="del" value="删除"> </td> </tr> <tr> <td>2</td> <td>cly</td> <td>loving</td> <td> <input type="button" class="edit" value="编辑"> <input type="button" class="del" value="删除"> </td> </tr> </tbody> </table>  <div class="wrapper hide"> <div class="modal"> <p>姓名<input type="text" id="uname"></p> <p>爱好<input type="text" id="uhabby"></p> <input type="submit" id="handle" value="确定"> <input type="submit" id="cancle" value="取消"> </div> </div> <script src="jquery-3.3.1.min.js"></script> <script> // 添加按钮 $("#add").click(function () { $(".wrapper").removeClass("hide"); }); // 若点击确定，则新建表格一条记录 $("#handle").click(function () { // 保存用户输入的添加对象的值 var unameVal = $("#uname").val(); var uhobbyVal = $("#uhabby").val(); // 克隆操作的两个按钮：编辑，删除 var $clEle = $("tbody tr:first").find("td:last").clone(true); // 序号自增 // 方法一 var $curEle = $("table tr:last"); var indexVal = $($curEle.find("td")[0]).text(); indexVal = Number(indexVal) + 1; // 方法二 // var indexVal = $("table tr").length; // var newEle = document.createElement("tr"); $(newEle).html("<td><td><td><td>"); // 插入表格最后 $(newEle).insertAfter($curEle); // 将事先保存的值初始化给新记录 $($(newEle)).find("td:first").text(indexVal); $($(newEle)).find("td").eq(1).text(unameVal); $($(newEle)).find("td").eq(2).text(uhobbyVal); $($(newEle)).find("td:last").html($clEle.html()); $("#uname").val(""); $("#uhabby").val(""); $(".wrapper").addClass("hide"); }); // 若点击取消，则清空文本框内容 $("#cancle").click(function () { $("#uname").val(""); $("#uhabby").val(""); $(".wrapper").addClass("hide"); }); // 点击编辑 $(".edit").click(function () { // 显示模版框 $(".wrapper").removeClass("hide"); // 获得当前记录tr的对象 // console.log($(this).parents().eq(1)); var $tdEles = $(this).parents().eq(1).find("td"); // 将当前行的值初始化文本框 // console.log($tdEles.eq(1).text()); // console.log($tdEles.eq(2).text()); $("#uname").val($tdEles.eq(1).text()); $("#uhabby").val($tdEles.eq(2).text()); }); // 点击删除 $(".del").click(function () { // 获得当前记录tr的对象 // console.log($(this).parents().eq(1)); $(this).parents().eq(1).remove(); }); </script> </body> </html>

回答动态