当前位置：Sham@双目瞿 > 学习笔记 > 代码学习 > 正文

jQuery-添加&删除&移动表单项

2021-03-16 分类：代码学习阅读(918) 评论(0)

最近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>

赞(4) 赏杯咖啡！

未经允许不得转载：Sham@双目瞿 » jQuery-添加&删除&移动表单项

标签：jQuery 表单

相关推荐

评论抢沙发