如何追加一個HTML塊相同<form>標籤內現有的HTML塊？

我以下HTML塊：如何追加一個HTML塊相同<form>標籤內現有的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> &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>

現在點擊任何「添加新的折扣」按鈕後，下面的塊應該得到追加到第一個塊：

<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>

如何實現這使用jQuery。如果用戶希望刪除塊，那麼每個新添加的塊都應該有刪除按鈕。以下是我的原始HTML塊的jsFiddle鏈接。

Jsfiddle

來源

2014-05-01 PHPLover

在您尋求幫助之前，請至少嘗試解決問題 – Populus

@arjan：我已經添加了jsFiddle鏈接。 – PHPLover

它很簡單

可以使用Appendto方法

給類到您的每一個DIV，並使用

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

，並再次刪除HTML中，可以使用

$(".classB").remove()

如果你要複製的元素，然後

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

Refrence：https://api.jquery.com/appendTo/

來源

2014-05-01 14:26:24

創建一個可克隆的標籤。所有東西都是空白的。然後克隆並追加。

<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-01 14:29:27 casraf

您可以修改您的答案，以便它完全符合我的需求嗎？ – PHPLover

檢查更新 – casraf

只有一個問題 - 你也克隆了ID。您需要對這些內容進行說明，以便它們不會在文檔中重複。 –

你會想你的組與類名像「copyMe」的元素中的字段。綁定點擊事件，像這樣：

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

如果刪除按鈕是克隆組內（一類「removeCopy」的），然後結合很容易，以及：

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

如果在克隆組中有任何ID或名稱，增加它們或以其他方式改變它們可能是好的。

來源

2014-05-01 14:38:52 Scottux

對於像這樣簡單的任務來說，調用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-01 14:40:49 tomysshadow

如何追加一個HTML塊相同<form>標籤內現有的HTML塊？

回答

相關問題