js前端clone的要诀

Posted 2020-09-01 hoge66的专栏

1、首先要定义原体，这个包括对象，和隐藏属性，这个是不能显示的，最外层设置 class=“hide”，要克隆的部分设置为显示；

<ul id="loanoneTableHide" class="hide">
						<!-- Text inputs -->
						<li id="loanoneTable_trRow_1" class="CaseRow" > 
							<div class="item-content">
								<div class="item-media">
									<i class="icon icon-form-name"></i>
								</div>
								<div class="item-inner">
									
									<div class="item-input">
									<input class="btn btn-small" name="addrowloanoneBtn" type="button" value="新增"  onclick="addData();" >
							<input type="button" class="btn_edit" name="deleteName" value="删除" />
									<input type="hidden" name="userDescrips[0].id" value=""  >
							<input type="text" name="userDescrips[0].title" placeholder="标题" value="二维码" >
							<input type="text" name="userDescrips[0].tags"  placeholder="标签"  >
							<textarea name="userDescrips[0].descrip" placeholder="内容" class=""></textarea>
							<input type="hidden" name="userDescrips[0].username" value="hoge"  >
							
									</div>
								</div>
							</div>
						</li>
						<!-- Text inputs end-->
					</ul>

 2、上面的元素要放在form的外面，否则提交造成重复提交userDescrips[0]

<form id="uploadForm" action="${context}/mobile/savedescrip" enctype="multipart/form-data" method="post">
				<div class="list-block">
					<ul id="loanoneTable">
						<!-- Text inputs -->
						
						<!-- Text inputs end-->
					</ul>
						
				</div>
				<div class="content-block">
					<div class="row">
						<div class="col-50">
							<a href="#" class="button button-big button-fill button-danger">取消</a>
						</div>
						<div class="col-50">
							<a id="ajaxSubmit" href="#" class="button button-big button-fill button-success" >提交</a>
						</div>
					</div>
				</div>
				</form>