Realice lo siguiente para que agregues a tu código:
Modificación a función AddItem
:
function AddItem() {
var tbody = null;
var tabla = document.getElementById("tabla");
var nodes = tabla.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (nodes[x].nodeName == 'TBODY') {
tbody = nodes[x];
break;
}
}
if (tbody != null) {
var tr = document.createElement('tr');
tr.innerHTML = '<td><input type="text" name="item[]"/></td><td><input type="text" name="cantidad[]" onChange="Calcular(this);" value="1" /></td><td><input type="text" name="precunit[]" onChange="Calcular(this);" value="0"/></td><td><input type="text" name="totalitem[]" readonly /></td>';
/// agrege la siguiente (por la estructura que usaste; aquí guardo el valor anterior
tr.innerHTML+='<td style="display:none"><input type="text" name="totalitemold[]" value="0" /></td>';
tbody.appendChild(tr);
}
}
Realice camnbios a Calcular
:
function Calcular(ele) {
var cantidad = 0, precunit = 0, totalitem = 0;
var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;
// Inicio: Lo tenias casi al final
var total = document.getElementById("total");
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
}
// Fin: Lo tenias casi al final
for (var x = 0; x<nodes.length;x++) {
if (nodes[x].firstChild.name == 'cantidad[]') {
cantidad = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'precunit[]') {
precunit = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'totalitem[]') {
totalitem = parseFloat((precunit*cantidad),10);
nodes[x].firstChild.value = totalitem;
}
if (nodes[x].firstChild.name == 'totalitemold[]') {
total.innerHTML = parseFloat(total.innerHTML)-parseFloat(nodes[x].firstChild.value,10); // Restamos lo anterior
nodes[x].firstChild.value=totalitem; // Asumiendo no hay falla se coloca el nuevo valor de "if (nodes[x].firstChild.name == 'totalitem[]')", el cual será el "valor antes de modificar"
}
}
total.innerHTML = parseFloat(total.innerHTML)+totalitem;
}
Notas:
- Por la estructura que manejas, agrege un TD el cual lo puse oculto; verifica no afecte al presentarse; en caso que sí agrega en
<thead>
un<td style="display:none"></td>
luego de<th>Total</th>
y colocale .