javascript - 同じ内の既存の HTML ブロックに HTML ブロックを追加する方法鬼ごっこ？

Question

私は次の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 リンクです。

ジャスフィドル

Answer 1

とてもシンプルです

Appendto メソッドを使用できます

あなたのdivのそれぞれにクラスを与えて使用する

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

Htmlを再度削除するには、使用できます

   $(".classB").remove()

要素をコピーする場合は、

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

参照: https://api.jquery.com/appendTo/

Answer 2

「copyMe」のようなクラス名を持つ要素でフィールドをグループ化する必要があります。クリック イベントを次のようにバインドします。

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

削除ボタンが ('removeCopy' のクラスで) 複製されたグループ内にある場合、それにバインドするのも簡単です。

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

複製されたグループに ID または名前がある場合は、それらをインクリメントするか、何らかの方法で変更することをお勧めします。

Answer 3

このような単純なタスクのために Jquery を呼び出すのは、やり過ぎです。ネイティブ Javascript は、2 番目のブロックを書き込むために問題なく動作するはずです。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 は仕様の正式な部分ではなく、いつでもブラウザーから削除される可能性があります。もう 1 つの簡単なオプションは、2 番目のブロックで 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

Answer 4

複製可能なタグを作成します。すべてのものを空白にしたもの。次に、クローンして追加します。

<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');