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

最新推荐文章于 2024-04-29 16:07:47 发布

weixin_30929011

最新推荐文章于 2024-04-29 16:07:47 发布

阅读量767

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/required/p/10443459.html

版权

效果图

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 οnclick='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 οnclick='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();
　　　　　　　　}
　　　　　　}
　　});