JS代碼部分：

//div1模塊添加
  $('#div1BtnAdd').on('click', function() {
   var div1 = $('#div1').clone(true);
   // div1.find("input[id='div1BtnAdd']").attr("value","刪除");
   // div1.find("input[id='div1BtnAdd']").attr("onclick","deleteParent($(this))");
   // div1.find("input[id='div1BtnAdd']").removeAttr("id");
   div1.find("input[id='div1BtnAdd']").replaceWith('');
   div1.appendTo('#J_Form');
  });
  //div1子模塊行添加
  function addSubDiv1(obj){
   var subDiv1 = $('#subDiv1').clone(true);
   subDiv1.find("button[id='subDiv1BtnAdd']").remove();
   subDiv1.append('').appendTo(obj.parents('#subDiv1').parents('#div1'));
  }
  //div1子模塊行添加
  /** $('#subDiv1BtnAdd').on('click', function() {
   var subDiv1 = $('#subDiv1').clone(true);
   subDiv1.find("button[id='subDiv1BtnAdd']").remove()
   subDiv1.append('').appendTo('#div1');
  });
  */
  function deleteDiv1(obj){
   obj.parents('#div1').remove();
  }
  function deleteSubDiv1(obj){
   obj.parents('#subDiv1').remove();
  }

頁面展示部分效果基本完成，其中有部分代碼注釋的，那是我調(diào)試的代碼，可以忽略，雖然不對，但可以作為糾錯參考，可以想想為啥不對。

二、復(fù)雜表單項(xiàng)提交到controller

接著上面，頁面展示好了，后面要做的就是把表單內(nèi)容提交到后臺，后臺我用的是springMvc接收的，直接看代碼吧

JS部分：

//var obj = $("#J_Form").serialize();
  $("#btnSubmit").click(function(){
   var prodName = $("#J_Form").find("select[name='prodName']").val();
   var subProdName = $("#J_Form").find("select[name='subProdName']").val();
   var div1Arr = new Array(); 
   var obj = new Object();
   $('.div1').each(function(){ //循環(huán)div1
    var div1=$(this);
    var feeType1Var = div1.find("select[name='feeType1']").val();
    div1.find('.subDiv1').each(function(){ //循環(huán)subDiv1
     var subDiv1=$(this);
     var obj = new Object();
     obj.feeType = feeType1Var;
     obj.repayWay = 0;
     obj.fundName = subDiv1.find("select[name='fundName']").val();
     obj.dest = subDiv1.find("select[name='dest']").val();
     obj.transType = subDiv1.find("select[name='transType']").val();
     div1Arr.push(JSON.stringify(obj));
    });
   })
   $.ajax({
    type : 'POST',
    traditional:true,//防止深度序列化
    cache:false,
    async:false,
    dataType : 'json',
    url : '/fundAcct/menu/addFundConfigToDB',
    data : {
     "prodName" : prodName,
     "subProdName" : subProdName,
     "dataArr" :div1Arr
    },
    success : function(data) {
     if (data.msg=='success') {
      BUI.Message.Alert("success", "success");
      // 刷新頁面
     } else {
      BUI.Message.Alert("error:系統(tǒng)異常", "error");
     }
    },
    error : function(data) {
     BUI.Message.Alert("error:系統(tǒng)異常", "error");
    }
   });
  });

后臺Controller部分：

@RequestMapping("/addFundConfigToDB")
 @ResponseBody
 public JSONObject modifyTransCodeToDB(HttpServletRequest request, Map model) {
  //log.info("交易類型--------------------修改落庫DB");
  JSONObject json = new JSONObject();
  Map webParaMap = request.getParameterMap();
  String dataArry[] = webParaMap.get("dataArr");// TODO parse to Object
  String prodName = webParaMap.get("prodName")[0];
  String subProdName = webParaMap.get("subProdName")[0];
  String userName = null;
  if (null != SsoSession.getCurrentUser(request)) {
   userName = SsoSession.getCurrentUser(request).getName();
  }
  //log.info("修改交易類型，id = {}，名稱 = {},當(dāng)前用戶 ={}", id, transName, userName);
  if (dataArry.length > 1) {
   json.put("msg", "success"); 
   return json;
  } else {
   json.put("msg", "fail"); 
   return json;
  }
 }

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

感謝各位的閱讀！關(guān)于“jQuery如何實(shí)現(xiàn)表單動態(tài)加減、ajax表單提交功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！