Ola, sou iniciante na programação, mas estou desenvolvendo um sistema de gerenciamento, onde tenho que dar entrada de notas, ou seja estas notas necessitam de mais produtos eventualmente, e queria adicionar dinamicamente estes campos, realizando o clone row , no entanto consigo duplicar mas nao carrega as minhas funções de options.
<div id="main" class="container-fluid">
<form action="des_geral.php" method="post">
<div class="row">
<div class="col-xs-3">
<label for="campo2">Data</label>
<input type="date" class="form-control" id="data" name="data" >
</div>
<div class="col-xs-3 ">
<label for="campo5">Nº Nota Fiscal</label>
<input type="number" class="form-control" min="1" id="nf" name="nf" >
</div>
<div class="col-xs-6">
<label for="campo1">Fornecedor</label>
<div class="bs-docs-example no-code">
<select name="fornecedor" id="fornecedor" class="form-control" placeholder="Comece a digitar...">
<option></option>
<?php
$dados=mysql_query("SELECT * from cad_fornecedor");
while($row = mysql_fetch_assoc($dados)) {
echo "<option value='".$row["id"]."'>".$row["nome"]."</option>";
}
?>
</select></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Produto</th>
<th>Quantidade</th>
<th>Unidade</th>
<th>Valor Uni.(R$)</th>
<th>Valor total(R$)</th>
<th class="actions">Ações</th>
</tr>
</thead>
<tbody id="tabela">
<tr id="linha" class="row_0">
<td ><select style="width: 300px" name="produto" id="produto" onChange="retorna('1','1');" class="form-control" placeholder="Comece a digitar">
<option></option>
<?php
$dados=mysql_query("SELECT * FROM cad_produtos");
while($row = mysql_fetch_assoc($dados)) {
echo "<option value='".$row["id"]."'>".$row["nome"]."</option>";
}
?>
</select> </td>
<td><input type="number" class="form-control" style="width: 100px" oninput="calculate('linha')" min="1" id="qtd" name="qtd" ></td>
<td><input class="form-control" style="width: 100px" value="" name="unidade" id="unidade" readonly></td>
<td><input type="text" class="form-control" style="width: 150px" oninput="calculate('linha')" min="0" step="0.01" id="vuni" name="vuni" ></td>
<td><input type="text" class="form-control" style="width: 150px" readonly min="0" step="0.01" id="vtot" name="vtot" ></td>
<td><a id="add" onClick="addRow('tabela')" class="btn btn-success btn-xs" href="#">Mais Campos</a><a id="remover" class="btn btn-danger btn-xs" href="#">Remover</a></td>
</tr>
</tbody>
</table>
<table style="width: 900px"><tbody>
<tr>
<th style="width: 300px">Total</th>
<th style="width: 100px"></th>
<th style="width: 100px"></th>
<th style="width: 150px"></th>
<th style="width: 150px"></th>
<th style="width: 100px"></th>
</tr>
</tbody></table>
</div>
</div>
</div>
<hr />
<div id="actions" class="row">
<div class="col-md-12">
<button id="salvar_des" name="salvar_des" type="submit" class="btn btn-primary">Salvar</button>
<a href="des_geral.php" class="btn btn-default">Cancelar</a>
</div>
</div>
</form>
</div>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 5) { // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
row.id = 'row_'+rowCount;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.outerHTML = table.rows[0].cells[i].outerHTML;
}
$.getJSON('des_processa.php?search=',{op: 10, ajax: 'true'}, function(j){
var options = '<option></option>';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].id_produto + '">' + j[i].produto + '</option>'; }
$('#produto').last().html(options); });
var listitems= row.getElementsByTagName("input")
for (i=0; i<listitems.length; i++) {
listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
}
} else {
alert("Maximum Passenger per ticket is 4.");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null !== chkbox && true === chkbox.checked) {
if (rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all the Passenger.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
function calculate(elementID,num) {
var mainRow = document.getElementById(elementID);
var myBox1 = mainRow.querySelectorAll('[name=qtd[0]]')[0].value;
var myBox2 = num;
var total = mainRow.querySelectorAll('[name=vtot[0]]')[0];
var myResult1 = myBox1 * myBox2;
total.value = myResult1;
$("#vuni")[0].maskMoney({thousands:'.', decimal:',', affixesStay: false});
$("#vtot")[0].maskMoney({thousands:'.', decimal:',', affixesStay: false});
}
Agradeço se alguem puder me ajudar, Obrigado!