对于前端开发，我的分类分为两个层次。首先，第一个是基于前端架构的。后端开发的一些同事会看不起前端。他们认为前端无非是画一页纸，有点自大。目前我知道的一些前端框架基本分为三种主流框架： react js、vue和angular js，前两种仍然是目前的主流趋势。二是基于市面上的一些非主流工具包，比如BUI、FLatUI等。并结合自己的dom操作。

好了，别废话了。本文主要讲述如何实现动态加减表格的效果。花了一天时间才算出来，所以我想分享一下。本文主要分为两个部分：一是页面表单动态加减的实现，二是复杂表单项提交到控制器层。

一、实现动态加减法的形式

1.页面的效果如下。第一个新按钮增加了两列，即费用类型1和资金账户名称，这两列被称为Div block。第二个新增按钮增加了一个基金账户名称的横栏，称为sonDiv区块。新增第二种费用类型1及以下，显示删除按钮，同时新增第二个资金账户名称，显示删除按钮。

2.代码片段，html部分如下(BUI使用)

div class=' panel ' style=' margin-bottom : 10px；'div class=' panel-body ' Form id=' J _ Form ' class=' Form-horizontal ' action=' method=' get ' div class=' row-fluid ' div class=' control-group span 6 ' label class=' control-label ' s */s产品名称/label div class=' controls ' select id=' prodName ' name=' prodName ' class=' input-normal data-messages=' {必需的d : '产品名称}”数据规则=“{必需的d :真}”选项值=""请选择/option选项值='大毛贷'大毛贷/option选项值='老子贷'老子贷/option/select/div/div class='控制组跨度6 '标签class='控制-标签'的*/s子产品名称/label div class=' controls ' select id=' subped name ' name=' subped name ' class=' input-normal data-messages=' {必需的d : '子产品名称}”数据规则=“{必需的d : true }”选项值=""请选择/option选项值='小毛贷'小毛贷/option选项值='小子贷'小子贷/option/select/div/div/class=' row-fluid ' HR style=' height :1 px； 填充-底部：20 pxmargin:0自动筛选： alpha(opa city 336030)；' opa city 33600.5 border : none '边框-top:1px实心# 778899;//div div id=' div 1 ' class=' div 1 row-fluid ' div class=' row-fluid ' div class=' control-group span 6 ' label class=' control-label ' s */s费用类型1/label div class=' controls ' select id=' fee type 1 ' name=' fee type 1 ' class=' input-normal data-messages=' { required d : '费用类型1'} '数据-规则=' { required:true } '选项值=' '请选择/option选项值='放款'放款/option选项值='保费'保费/选项/选择/div /div输入id=' div 1 Bt nadd ' type=' button ' value='新增class=' button button-submit '/div div id=' sub v1 ' class=' sub v1 row-fluid ' div class=' control-group span 6 ' label class=' control-label ' s */s资金账户名称/label div class=' controls ' select id=' fund name ' name=' fund name ' class=' input-normal data-messages={必需的d : '资金账户名称}”数据规则=“{必需的d : true }”选项值=""请选择/option选项值='XX '保证金xx保证金/option选项值='XX '储备金xx储备金/option/select/div/div class='控制组跨度6 '标签class='控制-标签'的*/s方向/label div class=' controls ' select id=' dest ' name=' dest ' class=' input-normal data-messages=' {必需的d : '方向}”数据规则=“{必需的d : true }”选项值=""请选择/option选项值='调增'调增/option选项值='调减'调减/option/select/div/div class='控制组跨度6 '标签class='控制-标签'的*/s交易类型/label div class='控件select id=' TransType ' name=' TransType ' class=' input-normal data-messages=' {必需的d : '交易类型}”数据规则=“{必需的d : true }”选项值=""请选择/option选项值='提现'提现/option选项值='保证金缴保费'保证金缴保费/选项/选择/div /div按钮id=' subdir v1 btnadd ' type=' button ' onclick=' addsubdir vv1($(this))' class=' button button-submit '新增/button/div/div/form/div class=' row-fluid ' div class=' form-actions ' button type=' button ' id=' BTN提交' class=' “按钮按钮-提交”提交/button button type=' button ' id=' BTN back ' class=' button button-back ' span class=' span-back '返回/span/button /div /div /div JS代码部分：

//div1模块添加$('#div1BtnAdd ').on('click '，function() { var div1=$('#div1 ').克隆（真);//div 1。find(' input[id=' div 1 btnadd ']').attr('值','删除');//div 1。find(' input[id=' div 1 btnadd ']').attr('onclick '，' deleteParent($(this))')；//div 1。find(' input[id=' div 1 btnadd ']').removeAttr(' id ')；1区。find(' input[id=' div 1 btnadd ']').替换为('输入类型='按钮'值='删除class=' button button-submit ' onclick=' delete div 1($(this))' ')；1区。appendo(' # J _ Form ')；});//div1子模块行添加函数add sub v1(obj){ var sub v1=$(' # sub v1 ').克隆（真);subdisv 1。find(' button[id=' subdissv 1 btnadd ']').移除();subd v1。追加('输入类型='按钮'值='删除class=' button button-submit ' onclick=' delete sub v1($(this))' ').附录。父母(' # sub v1 ').父母(' # div 1 ')；} //div1子模块行添加/* * $(' # subdiv1b tnad ').on('click '，function(){ var sub v1=$(' # sub v1 ').克隆（真);subdisv 1。find(' button[id=' subdissv 1 btnadd ']').移除()subdv1。追加('输入类型='按钮'值='删除class=' button button-submit ' onclick=' delete sub v1($(this))' ').appendo(' # div 1 ')；});*/函数删除div 1(obj){ obj。父母(' # div 1 ').移除();}函数删除sub v1(obj){ obj。父母(' # sub v1 ').移除();}页面展示部分效果基本完成，其中有部分代码注释的，那是我调试的代码，可以忽略，虽然不对，但可以作为纠错参考，可以想想为啥不对。

二、复杂表单项提交到控制器

接着上面，页面展示好了，后面要做的就是把表单内容提交到后台，后台我用的是学习笔记一接收的，直接看代码吧

射流研究…部分：

//var obj=$('#J_Form ').serialize()；$('#btnSubmit ').单击（函数(){ var prodName=$('#J_Form ').查找('选择[名称='prodName']').val()；var子程序名=$(' # J _ Form ').find(' select[name=' subProductNAmE ']').val()；var div1Arr=新数组();var obj=新对象();$(.1 ').每个（函数(){ //循环div 1 var div 1=$(this)；var feetype 1 var=div 1。find(' select[name=' feetype 1 ']').val()；1区。查找('。sub v1’).每个（函数(){ //循环sub v1 var sub v1=$(本)；var obj=新对象();物体。feetype=feetype 1 var物体。返回方式=0；物体。基金名称=subd v1。find(' select[name=' fund name ']').val()；物体。dest=subd v1。查找('选择[名称='目的地']').val()；物体。trans type=subd v1。查找('选择[名称=' trans type ']').val()；div1a RR。推送(JSON。stringify(obj))；});}) $.ajax({ type : 'POST '，traditional:true，//防止深度序列化cache:false，async:false，dataType : 'json '，URL : '/Fundacct/menu/AddFundconfigTodb '，数据： { 'prodName' : prodName，'子程序名' :子程序名，' dataArr ' :div1Arr }，成功：函数（数据){ if(数据。msg=='成功' { BUI } .消息。提醒("成功"、"成功");//刷新页面} else { BUI .消息。警报(' error:系统异常，'错误');} },错误：函数（数据){ BUI .消息。警报(' error:系统异常，'错误');} });});后台控制器部分：

@ request mapping('/addfundfconfigtodb ')@响应体公共JSON Object modify transcodedb(httpersvletrequest请求，MapString，对象模型){ //log.info('交易类型-修改落库DB’)；JSON对象JSON=新的JSON对象()；映射字符串，字符串[]WebParamep=请求。getparameter map()；字符串dataArry[]=webparamap。get(' DataArr ')；//TODO解析为对象字符串prodName=webparamap。获取(' prodName ')[0]；string SubParame=WebParamep。get(' SubmIt name ')[0]；字符串用户名=空；if (null！=SsoSession.getCurrentUser(请求)){ userName=ssosession。getcurrentuser(请求)。getName()；} //log.info('修改交易类型，id={}，名称={},当前用户={} '，id，transName，userName)；if(DataArry。长度1){ JSON。放(' msg '，' success ')；返回json} else { json.put('msg '，' fail ')；返回json} }总结

以上就是边肖为了实现表单动态加减和ajax表单提交功能而引入的jQuery。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！