动态表单添加一行,删除一行

效果图

html部分

<form class="cus-form" id="form">
<div class="padding20 bgWhite marginTop20">
<div class="container form-horizontal form-box">
<div id="enuParams">

</div>
</div>
</div>
</form>

js部分
<script type="text/javascript">

var enuParam_index = 1;
$(function() {

var enuParam = "<div id='enuParam_"+enuParam_index+"' class='row'>" +
"<div class='form-item col-sm-5 topAndBottom'>" +
"<label class='col-sm-6 control-label'> 枚举值: </label>" +
"<div class='col-sm-6'>" +
"<input type='text' class='form-control input-sm value_a' placeholder='请填写枚举值' name='enu_value' maxlength='32'>" +
"</div>" +
"</div>" +
"<div class='form-item col-sm-4 topAndBottom'>" +
"<label class='col-sm-4 control-label'>枚举名称: </label>" +
"<div class='col-sm-8'>" +
"<input type='text' class='form-control input-sm' placeholder='请填写枚举名称' name='enu_name' maxlength='32'>" +
"</div>" +
"</div>" +
"<div class='form-item col-sm-2 topAndBottom'>" +
"<div class='col-sm-12'>" +
"<span id='add' type='button' class='btn stockBtn'>+</span>" +
"<span onclick='del_enuParam(id)' id='del_enuParam_"+enuParam_index+"' type='button' class='btn stockBtn'>-</span>" +
"</div>" +
"</div>" +
"</div>";
$("#enuParams").append(enuParam);

enuParam_index++;
});

//添加配置枚举
// var addrow = document.getElementById("enuParam").outerHTML;

$(document).on("click", "#add", function(){
var enuParam = "<div id='enuParam_"+enuParam_index+"' class='row'>" +
"<div class='form-item col-sm-5 topAndBottom'>" +
"<label class='col-sm-6 control-label'> 枚举值: </label>" +
"<div class='col-sm-6'>" +
"<input type='text' class='form-control input-sm value_a' placeholder='请填写枚举值' name='enu_value' maxlength='32'>" +
"</div>" +
"</div>" +
"<div class='form-item col-sm-4 topAndBottom'>" +
"<label class='col-sm-4 control-label'>枚举名称: </label>" +
"<div class='col-sm-8'>" +
"<input type='text' class='form-control input-sm' placeholder='请填写枚举名称' name='enu_name' maxlength='32'>" +
"</div>" +
"</div>" +
"<div class='form-item col-sm-2 topAndBottom'>" +
"<div class='col-sm-12'>" +
"<span id='add' type='button' class='btn stockBtn'>+</span>" +
"<span onclick='del_enuParam(id)' id='del_enuParam_"+enuParam_index+"' type='button' class='btn stockBtn'>-</span>" +
"</div>" +
"</div>" +
"</div>";
$("#enuParams").append(enuParam);
enuParam_index++;


});

function del_enuParam(id){
var aa = id.split("_")
var ids = aa[1]+"_"+aa[2]
//alert(id)
//alert(ids)
var enuParams = document.getElementById("enuParams")
if(enuParams.childNodes.length>2){
enuParams.removeChild(document.getElementById(ids))
}else{
layer.alert("至少保留一个");
}
}


</script>
 -----------------------------------------------

删除一行的另一种写法

$(document).on("click", "#delete_1_0", function(){
              if($("#param_1_1_0 .row").length=="1"){
        return;
    }else{
      if($(this).parent().parent("#param_1_1_1_0:first-child").attr("id")=="param_1_1_1_0"){
        return;
      }else{
        $(this).parent().parent().remove();
        }
      }
  });

 

猜你喜欢

转载自www.cnblogs.com/required/p/10443459.html
今日推荐