我关注HTML块：
<form action="add_rebate_by_quat_volume.php" role="form" method="post">
<div class="row">
<input type="hidden" class="form-control" name="op" id="op" value="preview">
<input type="hidden" class="form-control" name="id" id="id" value="">
<input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes">
<div class="col-xs-2">
</div>
<div style="float: clear;"></div>
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer<span style="color:#FF0000">*</span></label>
<div class="col-lg-7">
<select id="company_id" name="company_id" class="form-control" onchange="GetAllProductByManufacturerID(this.value)">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<div class="col-lg-7">
<button style="float:right" class="btnAdd" type="button" class="btn btn-default" onclick="add_rebate(); return false;"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div>
</div>
</div>
</br>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
</br>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1">
<td>
<div class="btn-group">
<select name="product_id" class="form-control prod_list">
<option value="" selected='selected'>Select Product</option>
</select>
</div>
</td>
<td><input type="text" name="pack" id="pack" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity" id="quantity" value="" class="form-control" size="8"/></td>
<td><input type="text" name="volume" id="volume" value="" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select id="units" name="units" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount" id="amount" value="" class="form-control" size="9"/></td>
</tr>
</tbody>
<tfoot>
<tr id="reb2">
<td><button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default" onclick=""> Add</button></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-6">
<label for="name" class="col-lg-5">Rebate Start Date<span style="color:#FF0000">*</span></label>
<div class="col-lg-6">
<input class="form-control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date" value="">
</div>
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6">Rebate Expiry Date<span style="color:#FF0000">*</span></label>
<div class="col-lg-6">
<input class="form-control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date" value="">
</div>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-6">
<label for="name" class="col-lg-5">Applicable States</label>
<div class="col-lg-7">
<select id="example28" multiple="multiple" name="applicable_states[]">
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
<option value="4">Arkansas</option>
<option value="5">California</option>
<option value="6">Colorado</option>
<option value="7">Connecticut</option>
<option value="8">Delaware</option>
<option value="9">Florida</option>
<option value="10">Georgia</option>
</select>
</div>
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6">Rebate Total Count</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="rebate_total_count" id="rebate_total_count" value="">
</div>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6"></label>
<div class="col-lg-6">
<button style="float:right" class="btnAdd" type="button" class="btn btn-default" onclick="add_rebate(); return false;"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5"></div>
<div style="margin-left: -9px" class="col-xs-5">
<button type="submit" class="btn btn-primary">Preview</button>
<button type="button" class="btn btn-default">Go Back</button>
</div>
</div>
</div>
</form>
现在点击任何“添加新回扣”按钮后，下一个块应该附加到第一个块：
<div style="float: clear;"></div>
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer<span style="color:#FF0000">*</span></label>
<div class="col-lg-7">
<select id="company_id" name="company_id" class="form-control" onchange="GetAllProductByManufacturerID(this.value)">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<div class="col-lg-7">
<button style="float:right" class="btnAdd" type="button" class="btn btn-default" onclick="add_rebate(); return false;"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div>
</div>
</div>
</br>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
</br>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1">
<td>
<div class="btn-group">
<select name="product_id" class="form-control prod_list">
<option value="" selected='selected'>Select Product</option>
</select>
</div>
</td>
<td><input type="text" name="pack" id="pack" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity" id="quantity" value="" class="form-control" size="8"/></td>
<td><input type="text" name="volume" id="volume" value="" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select id="units" name="units" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount" id="amount" value="" class="form-control" size="9"/></td>
</tr>
</tbody>
<tfoot>
<tr id="reb2">
<td><button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default" onclick=""> Add</button></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-6">
<label for="name" class="col-lg-5">Rebate Start Date<span style="color:#FF0000">*</span></label>
<div class="col-lg-6">
<input class="form-control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date" value="">
</div>
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6">Rebate Expiry Date<span style="color:#FF0000">*</span></label>
<div class="col-lg-6">
<input class="form-control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date" value="">
</div>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-6">
<label for="name" class="col-lg-5">Applicable States</label>
<div class="col-lg-7">
<select id="example28" multiple="multiple" name="applicable_states[]">
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
<option value="4">Arkansas</option>
<option value="5">California</option>
<option value="6">Colorado</option>
<option value="7">Connecticut</option>
<option value="8">Delaware</option>
<option value="9">Florida</option>
<option value="10">Georgia</option>
</select>
</div>
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6">Rebate Total Count</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="rebate_total_count" id="rebate_total_count" value="">
</div>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6"></label>
<div class="col-lg-6">
<button style="float:right" class="btnAdd" type="button" class="btn btn-default" onclick="add_rebate(); return false;"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div>
</div>
如何使用jQuery实现这一目标。如果用户希望，每个新添加的块上还应该有删除按钮以删除块。以下是我原始HTML块的jsFiddle链接。
答案 0 :(得分：0)
非常简单
您可以使用Appendto方法
为每个div提供类并使用
$( ".classA" ).appendTo( ".classB" );
并且要再次删除Html，您可以使用
$(".classB").remove()
如果您想要复制元素，那么
$( ".classA" ).clone().appendTo( ".classB" );
答案 1 :(得分：0)
创建克隆标记。其中包含所有内容的空白。然后克隆并附加。
<div id="clonethis" style="float: clear;"></div>
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer<span style="color:#FF0000">*</span></label>
<div class="col-lg-7">
<select id="company_id" name="company_id" class="form-control" onchange="GetAllProductByManufacturerID(this.value)">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<div class="col-lg-7">
<button style="float:right" class="btnAdd" type="button" class="btn btn-default" onclick="add_rebate(); return false;"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div>
</div>
</div>
</br>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
</br>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1">
<td>
<div class="btn-group">
<select name="product_id" class="form-control prod_list">
<option value="" selected='selected'>Select Product</option>
</select>
</div>
</td>
<td><input type="text" name="pack" id="pack" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity" id="quantity" value="" class="form-control" size="8"/></td>
<td><input type="text" name="volume" id="volume" value="" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select id="units" name="units" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount" id="amount" value="" class="form-control" size="9"/></td>
</tr>
</tbody>
<tfoot>
<tr id="reb2">
<td><button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default" onclick=""> Add</button></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-6">
<label for="name" class="col-lg-5">Rebate Start Date<span style="color:#FF0000">*</span></label>
<div class="col-lg-6">
<input class="form-control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date" value="">
</div>
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6">Rebate Expiry Date<span style="color:#FF0000">*</span></label>
<div class="col-lg-6">
<input class="form-control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date" value="">
</div>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-6">
<label for="name" class="col-lg-5">Applicable States</label>
<div class="col-lg-7">
<select id="example28" multiple="multiple" name="applicable_states[]">
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
<option value="4">Arkansas</option>
<option value="5">California</option>
<option value="6">Colorado</option>
<option value="7">Connecticut</option>
<option value="8">Delaware</option>
<option value="9">Florida</option>
<option value="10">Georgia</option>
</select>
</div>
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6">Rebate Total Count</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="rebate_total_count" id="rebate_total_count" value="">
</div>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6"></label>
<div class="col-lg-6">
<button style="float:right" class="btnAdd" type="button" class="btn btn-default" onclick="add_rebate(); return false;"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div>
</div>
然后：
$('#clonethis').clone(true).removeAttr('id').appendTo('form');
答案 2 :(得分：0)
您需要将字段分组为具有类名“copyMe”的元素。像这样绑定你的点击事件：
$('#addRebate').on('click', function (){
$('.copyMe:eq(0)').clone().appendTo('form');
});
如果删除按钮位于克隆组内（使用'removeCopy'类），那么绑定也很容易：
$(document).on('click','.removeCopy', function (){
$(this).closest('.copyMe').remove();
});
如果克隆组中有任何ID或名称，最好增加它们或以其他方式更改它们。
答案 3 :(得分：0)
将Jquery称为像这样简单的任务是有点过分，本机Javascript应该可以正常工作来编写第二个块。请记住，在调用Jquery之后，您仍然可以使用本机JS函数。简单的方法是简单地使用普通的Javascript的innerHTML和+ =符号将它附加到当前代码。
<div id="wrapper">
put first block here...
</div>
<script LANGUAGE="Javascript">
// put the id of the element to add the second block to and what to add to it below
document.getElementById("wrapper").innerHTML += "second block without any newlines here";
</script>
但innerHTML不是规范的官方部分，可以随时从浏览器中删除。 另一个更简单的选择可能是使用第二个块创建一个div，但最初只能通过CSS使其不可见：
<div id="secondblock" style="display:none;">
...
</div>
<script LANGUAGE="Javascript">
document.getElementById("secondblock").style.display="inline";
</script>
然而，官方的方法是使用appendChild / insertBefore。这是一个复杂的方法，但如果你真的必须按照规范来做，这里有一个解释它们的链接。 http://www.javascriptkit.com/javatutors/dom2.shtml