3、js中html元素的增加与删除

1、jsp中

<form class="form-horizontal" role="form" id="tableCreateForm" >

　　<input type="button" class="btn btn-primary btn-sm" value="增" id="tableadd" />

　　<input type="button" class="btn btn-primary btn-sm" value="全部移除" id="tabledelete" />

　　<!-- 元素增加处 -->
     <div class="row-box" id="tabForm">          
　　</div>

</form>

 

js中

2、//字段减
function removeNode(){
    $("#tabForm").find(".singelTableRemove").unbind("click");//防止一次全部移除
    $("#tabForm").find(".singelTableRemove").on("click",function(){
        $(this).parents(".row-singel").remove();
    });
}

3、如：

function createRow(n){
    html="";
    html="<div class='row-singel'>";
    html+="<div class='row'>";
    html+="<div class='col-sm-2'>";
    html+="<div class='form-group' style='margin-bottom:0px;'>";
    html+="<label class='col-sm-5 control-label'>字段名</label>";
    html+="<div class='col-sm-7'>";
    html+="<input type='text' class='form-control' placeholder='此项必填' id='createTableName"+n+"' name='createTableName"+n+"' onblur='nameCheck(this)' onfocus='focusHe(this)' style='margin-left:-20px;width:110px;'>";
    html+="</div></div></div>";
    
    html+="<div class='col-sm-2'>";
    html+="<div class='form-group' style='margin-bottom:0px;'>";
    html+="<label class='col-sm-4 control-label'>类型</label>";
    html+="<div class='col-sm-8'>";
    html+="<select class='form-control' id='createTableType"+n+"' name='createTableType"+n+"' style='margin-left:-20px;width:110px;'>";
    html+="<option value='NUMBER'>NUMBER</option>";
    html+="<option value='VARCHAR2'>VARCHAR2</option>";
    html+="<option value='DATE'>DATE</option></select>";
    html+="</div></div></div>";
    
    html+="<div class='col-sm-2'>";
    html+="<div class='form-group' style='margin-bottom:0px;'>";
    html+="<label class='col-sm-4 control-label'>长度</label>";
    html+="<div class='col-sm-8'>";
    html+="<input type='text' class='form-control' placeholder='字段长度' id='createTableLength"+n+"' name='createTableLength"+n+"' onblur='typeLengthCheck(this)' onfocus='focusHe(this)' style='margin-left:-20px;width:110px;'>";
    html+="</div></div></div>";
    
    html+="<div class='col-sm-2'>";
    html+="<div class='form-group' style='margin-bottom:0px;'>";
    html+="<label class='col-sm-4 control-label'>描述</label>";
    html+="<div class='col-sm-8'>";
    html+="<input type='text' class='form-control' placeholder='字段描述' id='createTableDsc"+n+"' name='createTableDsc"+n+"' style='margin-left:-20px;width:110px;width:110px;'>";
    html+="</div></div></div>";
    
    html+="<div class='col-sm-3'>";
    html+="<div class='form-group' style='margin-bottom:0px;'>";
    html+="<label class='col-sm-4 control-label'>是否建分区</label>";
    html+="<div class='col-sm-3'>";
    html+="<select class='form-control' id='partition"+n+"' name='partition"+n+"' style='margin-left:-20px;width:110px;'>";
    html+="<option value='0'>否</option>";
    html+="<option value='1'>是</option>";
    html+="</select>";
    html+="</div>";
    html+="<div class='col-sm-5'>";
    html+="<input type='text' class='form-control' style='margin-left:-30px;width:110px;' placeholder='分区值' id='partitionValue"+n+"' name='partitionValue"+n+"'>";
    html+="</div>";
    html+="</div></div>";
    
    html+='<div class="col-sm-1">'+
            '<button class="btn btn-primary btn-sm singelTableRemove" type="button">移除</button>'+
            '</div></div></div>';
    return html;
}

4、

m=0;
    //字段增
    $("#tableadd").on("click",function(){
        $("#tabForm").append(createRow(m));
        m=m+1;
        removeNode();
    });
    //全部移除
    $("#tabledelete").on("click",function(){
        $("#tabForm").html("");
    });
    removeNode();