0

I've following HTML block:

<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> &nbsp;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="">&nbsp;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> &nbsp;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>

Now after clicking on any of the "Add New Rebate" button the following block should get append to the first block:

<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> &nbsp;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="">&nbsp;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> &nbsp;Add New Rebate</button>
                    </div>
                  </div> 
                </div>

How to achieve this using jQuery. Also there should be delete button on each newly added block for deleting the block if user wishes to. Following is the jsFiddle link for my original HTML block.

Jsfiddle

4

4 回答 4

0

您将希望将您的字段分组到具有类名（如“copyMe”）的元素中。像这样绑定你的点击事件：

$('#addRebate').on('click', function (){
    $('.copyMe:eq(0)').clone().appendTo('form');
});

如果删除按钮在克隆组内（具有“removeCopy”类），那么绑定到它也很容易：

$(document).on('click','.removeCopy', function (){
    $(this).closest('.copyMe').remove();
});

如果克隆组中有任何 id 或名称，最好增加它们或以其他方式更改它们。

于 2014-05-01T14:38:52.137 回答
0

它非常简单

您可以使用 Appendto 方法

给你的每个 div 上课并使用

  $( ".classA" ).appendTo( ".classB" );

并再次删除 Html ，您可以使用

   $(".classB").remove()

如果你想复制元素然后

   $( ".classA" ).clone().appendTo( ".classB" );

参考：https ://api.jquery.com/appendTo/

于 2014-05-01T14:26:24.230 回答
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

于 2014-05-01T14:40:49.393 回答
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> &nbsp;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="">&nbsp;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> &nbsp;Add New Rebate</button>
                </div>
              </div> 
            </div>

接着：

$('#clonethis').clone(true).removeAttr('id').appendTo('form');
于 2014-05-01T14:29:27.370 回答