最近Sham用后端发布表单问卷的时候，发现原来的功能不够好，于是今天抽空把表单项功能丰富调整了下，现在可以实现：
1. 点击+号，在下方插入一行表单项；
2.点击-号，删除当前表单项；
3. 点击向上箭头，将当前行上移一行；
4. 通过下拉菜单选中的值，来判断改变当前项内特定的样式等；
以上功能是基于jQuery实现的，特此记录备忘，效果浏览地址：点我浏览效果
完整代码如下（里面用到了layui，主要就是用到了样式和下拉菜单，可根据实际需要来确定用不用）
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" href="js/layui/css/layui.css" media="all"><script src="js/jquery.min.js"></script><script src="js/layui/layui.js" charset="utf-8"></script><title>js/jquery添加删除表单项</title></head><body><form class="layui-form" action=""><div class="layui-form-item" style="position:relative;z-index:99999;" ><fieldset class="layui-elem-field layui-field-title"><legend style="font-weight:bolder;">添加&删除&移动表单项</legend></fieldset><div class="layui-input-block" style="background:#eee;width:1000px;" id="addonlist"><div style="width:30px;display:inline-block;margin-left:10px;">添加</div><div style="width:100px;display:inline-block;margin:10px;">表单组件类型</div><div style="width:60px;display:inline-block;margin:10px;">数量限制</div><div style="width:150px;display:inline-block;margin:10px;">表单组件名称</div><div style="width:450px;display:inline-block;margin:10px;">表单组件值（单选/多选请在此输入，并用英文逗号,分隔）</div><div style="width:30px;display:inline-block;margin-left:10px;text-align:center;">删除</div><div style="width:30px;display:inline-block;margin-left:10px;text-align:center;">上移</div><div style='display:block;width:1000px;margin:5px;'><div class='layui-form-item' style='width:100px;display:inline-block;'> <select name='n_addontype[]' class='n_addon' style='width:100px;' lay-filter='addontype'><option value=''></option><option value='input'>输入框</option><option value='picker'>下拉选项</option><option value='radios'>单选项</option><option value='checkbox'>多选项</option><option value='grade'>评分</option><option value='votes'>评奖</option><option value='v-votes'>视频投票</option><option value='textarea'>多行输入框</option><option value='imgupload'>允许上传图片（目前最多2张）</option></select></div><div id='choicelimit' style='width:60px;display:inline-block;margin:5px 10px;'><input class='layui-input choicelimit n_addon' type='text' disabled value='' name='choicelimit[]' style='width:60px;background:#eee;'></div><div style='width:150px;display:inline-block;margin:5px 10px;'><input class='layui-input n_addon' type='text' value='' name='n_addondesc[]' style='width:150px;'></div><div style='width:450px;display:inline-block;margin:5px 10px;'><input class='layui-input n_addon' type='text' value='' name='n_addonchoice[]' placeholder='活动选择清单(多个选择时用英文逗号,来分隔)' style='width:450px;'></div><input class='layui-input' type='button' value='+' onclick='addOrRemove(this)' style='width:30px;float:left;margin:5px 10px;padding-right:20px;background:#5FB878;color:#fff;font-weight:bolder'></div></div></div></form><script type='text/javascript'>/**通过下拉菜单选中的值来改变指定元素的样式等**/layui.use('form', function(){var form = layui.form;form.on("select(addontype)", function(data){console.log(data.value)var choicelimit = $(this).parent().parent().parent().parent().children('#choicelimit').children('.choicelimit'); if(data.value == "checkbox" || data.value == "v-votes" || data.value == "imgupload"){choicelimit.attr('disabled',false );choicelimit.attr('style',"background:#fff;" );}else{choicelimit.attr('disabled',"disabled" );choicelimit.attr('style',"background:#eee;" );}});});/**点击添加删除input**/function addOrRemove(btn) {var add = btn.value == "+";var div = btn.parentNode,divs = btn.parentNode, list = div.parentNode;var rmv = "<i class='layui-icon layui-icon-up remove' style='float:right;margin:15px 20px 10px 10px;' onclick='moveup(this)'></i><input class='layui-input remove' type='button' value='-' onclick='addOrRemove(this)' style='width:30px;float:right;margin:5px 10px 5px 5px;padding-right:20px;background:#5FB878;color:#fff;font-weight:bolder'>";console.log($('#addonlist').children().length)if (add) {div = div.cloneNode(true);$(div).find('.n_addon').val('');$(div).find('.n_addons').val('');divs.after(div);if($(div).children('.remove').length==0){$(div).append(rmv);}}else list.removeChild(div);layui.use('form', function() {var form = layui.form; form.render();});};/**上移当前项**/function moveup(btn) {var div = btn.parentNode, Pre = $(div).prev();var mv = "<i class='layui-icon layui-icon-up remove' style='float:right;margin:15px 20px 10px 10px;' onclick='moveup(this)'></i><input class='layui-input remove' type='button' value='-' onclick='addOrRemove(this)' style='width:30px;float:right;margin:5px 10px 5px 5px;padding-right:20px;background:#5FB878;color:#fff;font-weight:bolder'>";if($(Pre).children('.remove').length==0){Pre.append(mv);$(div).children('.remove').remove();}Pre.insertAfter(div);};</script></body></hteml>
一个在前往码农道路上走走停停的行政文员
