what happens is that I already have the behavior to add rows (JS and HTML) with my plus sign, however I have the problem that the form that is duplicated (with the formset) does not have the code in django, and obviously what I want is that I add the rows with the HTML, JS and Django.
I wish I could recycle my code so that cell1.outerHTML (and the others) could contain something like this: {% render_field form.code class = "form-control"%}
I just don't know if it can be done, hopefully because my knowledge of JS is minimal :(
presupuestos-forms.html
<table class="table table-bordered table-nowrap align-middle" id="childTable1">
<thead class="table-info">
<tr>
<th scope="col">Código</th>
<th scope="col">Descripción</th>
<th scope="col">Cantidad</th>
<th scope="col">Precio Unitario</th>
<th scope="col">Precio Total</th>
<th scope="col">Libre de Impuestos</th>
<th scope="col">Agrega Fila</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{{presupuestosparteform.codigo}}
</td>
<td>
{{presupuestosparteform.descripcion}}
</td>
<td>
{{presupuestosparteform.quantity}}
</td>
<td>
{{presupuestosparteform.unit_price}}
</td>
<td>
{{presupuestosparteform.total_price}}
</td>
<td>
<div>
{{presupuestosparteform.tax_free}}
</div>
</td>
<td>
<input type="button" class="btn btn-block btn-default" id="addrow" onclick="childrenRow()" value="+" />
</td>
</tr>
<tr>
{{ formset.management_form }}
{% for form in formset %}
<td>
{% render_field form.codigo class="form-control" %}
</td>
<td>
{% render_field form.descripcion class="form-control" %}
</td>
<td>
{% render_field form.quantity class="form-control" %}
</td>
<td>
{% render_field form.unit_price class="form-control" %}
</td>
<td>
{% render_field form.total_price class="form-control" %}
</td>
<td>
{% render_field form.tax_free class="form-check-input" %}
</td>
{% endfor %}
</tr>
</tbody>
</table>
add-parts-rows.js
function deleteRow(id)
{
document.getElementById(id).remove()
}
function childrenRow() {
var table = document.getElementById("childTable1");
// GET TOTAL NUMBER OF ROWS
var x =table.rows.length;
var id = "tbl"+x;
var row = table.insertRow(x);
row.id=id;
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.outerHTML = ' <td><input type="text" name="parts_code" class="form-control input-new-customer-code newcode" autofocus/></td>';
cell2.innerHTML = ' <input type="text" name="parts_description" class="form-control input-new-customer-description" />';
cell3.innerHTML = ' <input type="text" name="parts_quantity" class="form-control input-new-customer-quantity" />';
cell4.innerHTML = ' <input type="text" name="parts_unit_price" class="form-control input-new-customer-unit-price" />';
cell5.innerHTML = ' <input type="text" name="parts_total_price" class="form-control input-new-customer-total" />';
cell6.innerHTML = ' <input type="button" class="btn btn-block btn-default" id="addrow" onclick="deleteRow(\''+id+'\')" value="Delete" /> ';
}
document.getElementsByClassName("newcode").onfocus = function() {setFocusInput()};
function setFocusInput(){
document.getElementsByClassName("newcode").focus();
}