使用javascript函数而不重复

Question

我正在复制以下<div>部分，并且在JavaScript函数下面，我想一次又一次地使用。 如果可能，请分享您的想法。

 <?php  $new_material = ["a","b","c"];   //array to pass in foreach 

           foreach ($new_material as $mat) {

     ?>

    <div class="row " id="row2">
              <div class="row " id="row2.1">
                <div class="col-xs-2"> 
                  <label>Material Name</label>
                </div>
                <div class="col-xs-3">
                  <label>Brand</label>
                </div>
                <div class="col-xs-2">
                  <label>Category</label>
                </div>
              </div>

                <div class="row " id="row2.2">
              <div class="col-xs-2">  


              <p id="material_select"><?=$mat?></p>


          </div>

                <div class="col-xs-3">
                  <input type="text" class="form-control" name="brand" id="brand"/>
                </div>
                <div class="col-xs-2">
                  <input type="text" class="form-control" name="category" id="category"/>
                </div>
                  <label class="col-xs-2">Total Quantity:</label>
                <div class="col-xs-2">
                  <input type="text" class="form-control" name="totalquantity" id="totalquantity"/>
                <br>
                </div>
              </div>

              <div class="row " id="row2.3">
                <label class="col-xs-1">Specification</label>
                <label class="col-xs-1">Quantity</label>
                <label class="col-xs-2">Unit</label>
               <button type="button" onclick="duplicate()" class="btn btn-info col-xs-3" >Add Specification</button>
                        <label class="col-xs-2">Unit:</label>
                        <span id="units_div">
                        <p class="" name="units"/>
                      </span>
              </div>
                  <div class="row " id="duplicater" >
                    <div class="col-xs-1">
                      <input type="text"  id="specification" class="form-control" name="specification[]"/>
                    </div>
                    <div class="col-xs-1">
                      <input type="text"  id="quantity" class="form-control" name="quantity[]"/>
                    </div>
                    <div class="col-xs-2" id="units1_div">
                        <p id="unit" name="unit[]"/>
                      </div>  
                    <div class="col-xs-2" id="delete">
                      <button id="delete_btn"type="button" onClick="removeduplicate(this)" class="btn btn-xs btn-danger" style="visibility:hidden;">Delete</button>
                    </div>
                  </div>
                  </div>

                    <br>
                <div>
                <div class="row " id="row2.4">
                  <label class="col-xs-1">Tax</label>
                  <label class="col-xs-1">Tax%</label>
                  <label class="col-xs-2">Tax Amount</label>
                  <button type="button" onClick="duplicate1()" class="btn btn-info col-xs-3" >Add Tax</button>
                  <label class="col-xs-2">Rate</label>
                  <div class="col-xs-2">
                    <input type="text" class="form-control" name="rate" id="rate"/><br>
                  </div>
                </div>
                  <div class="row " id="duplicater1" >
                    <div>
                     <input type="text" id="taxamt" class="form-control" name="taxamount[]"/>                    </div>
                    <div class="col-xs-1" id="tax_div">
                        <p id="unit" name="taxper[]"/>
                    </div>
                    <div class="col-xs-1">
                      <input type="text" id="taxamt" class="form-control" name="taxamount[]"/>
                    </div>
                    <div class="col-xs-2" id="delete">
                      <button id="delete_btn1" type="button" onClick="removeduplicate1(this)" class="btn btn-xs btn-danger" style="visibility:hidden;">Delete</button>
                    </div>
                  </div>
                </div>
                <div class="row" id="row 2.5">
                  <div class="col-xs-7">
                  </div>
                    <label class="col-xs-2">Total Amount</label>
                  <div class="col-xs-2">
                    <p id="totalamount" name="totalamount"></p>
                    <input type="hidden" value="" name="totalamount" id="totalamount" readonly/><br>
                  </div>
                </div>

        <?php 
          }
          ?>

JavaScript代码：这是JavaScript函数，当我在foreach()循环中传递物料名称时，我想在复制以上代码时使用，因此它是根据每个物料名称进行复制的。

function duplicate() {
  document.getElementById('delete_btn').style.visibility = "visible";
  var original = document.getElementById('duplicater');
  var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
   document.getElementById('delete_btn').style.visibility = "hidden";
   document.getElementById('specification').value="";
   document.getElementById('quantity').value="";
   document.getElementById('unit').value="";
}

function removeduplicate(element){
    element=element.parentNode.parentNode;//gets the id of the parent
    element.parentNode.removeChild(element);
}

Answer 1

javascript文件/代码加载的自然位置在头部，因此只需将其放在此处。 由于您不希望您的头部始终被复制（无效的html）。