程序概述:1、一個(gè)表單(顯式)2、一個(gè)模態(tài)框(隱式):負(fù)責(zé)添加和編輯數(shù)據(jù)的功能3、表單有添加,編輯,刪除按鈕需求及問題:添加功能和編輯功能是公用一個(gè)模態(tài)框,那么如何區(qū)分對(duì)待這兩個(gè)功能的數(shù)據(jù)提交PS;我把代碼放codepen上了,方便的話可移步此傳送門:https://codepen.io/mengjielee...源代碼clone*{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;}添加#姓名愛好操作1lmjswim2clyloving姓名愛好//添加按鈕$("#add").click(function(){$(".wrapper").removeClass("hide");});//若點(diǎn)擊確定,則新建表格一條記錄$("#handle").click(function(){//保存用戶輸入的添加對(duì)象的值varunameVal=$("#uname").val();varuhobbyVal=$("#uhabby").val();//克隆操作的兩個(gè)按鈕:編輯,刪除var$clEle=$("tbodytr:first").find("td:last").clone(true);//序號(hào)自增//方法一var$curEle=$("tabletr:last");varindexVal=$($curEle.find("td")[0]).text();indexVal=Number(indexVal)+1;//方法二//varindexVal=$("tabletr").length;//varnewEle=document.createElement("tr");$(newEle).html("");//插入表格最后$(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");});//若點(diǎn)擊取消,則清空文本框內(nèi)容$("#cancle").click(function(){$("#uname").val("");$("#uhabby").val("");$(".wrapper").addClass("hide");});//點(diǎn)擊編輯$(".edit").click(function(){//顯示模版框$(".wrapper").removeClass("hide");//獲得當(dāng)前記錄tr的對(duì)象//console.log($(this).parents().eq(1));var$tdEles=$(this).parents().eq(1).find("td");//將當(dāng)前行的值初始化文本框//console.log($tdEles.eq(1).text());//console.log($tdEles.eq(2).text());$("#uname").val($tdEles.eq(1).text());$("#uhabby").val($tdEles.eq(2).text());});//點(diǎn)擊刪除$(".del").click(function(){//獲得當(dāng)前記錄tr的對(duì)象//console.log($(this).parents().eq(1));$(this).parents().eq(1).remove();});
jQuery提交表單,區(qū)分添加和編輯的不同操作
紅顏莎娜
2019-05-20 17:52:11