[英]Repeating a function indefinitely, preferably without using setInterval()
[英]Using the javascript function without repeating it
我正在復制以下<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);
}
javascript文件/代碼加載的自然位置在頭部,因此只需將其放在此處。 由於您不希望您的頭部始終被復制(無效的html)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.