Tengo un problema al sumar todos los totales, logra sumar los totales de cada producto y un total final pero al momento de editar un precio o cantidad esta se suma al total final y no es editada correctamente.
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prueba de concepto de agregado y cálculo dinámico.</title>
<link rel="stylesheet" type="text/css" media="all" href="css/base.css" />
<style type="text/css">
#contenedor {
width: 90%;
margin: auto;
}
#tabla {
width: 100%;
margin: auto;
border: 1px solid #a1a1a1;
}
#tabla thead tr {
background-color: #afafaf;
}
#tabla thead tr th, #tabla tbody tr td {
border: 1px solid #a1a1a1;
padding: 3px;
}
#tabla tbody tr td input {
padding: 3px;
border: 1px solid #717171;
}
#total {
font-size: 1.1em;
font-weight: bold;
}
</style>
<script type="text/javascript">
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>';
tbody.appendChild(tr);
}
}
function Calcular(ele) {
var cantidad = 0, precunit = 0, totalitem = 0;
var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;
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;
}
}
var total = document.getElementById("total");
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
}
total.innerHTML = parseFloat(total.innerHTML)+totalitem;
}
</script>
</head>
<body>
<form name="frmitems" id="frmitems" action="recibe221.php" method="POST">
<div id="contenedor">
<table id="tabla">
<thead>
<tr>
<th>Item</th>
<th>Cantidad</th>
<th>Precio Unitario</th>
<th>Total</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td> </td>
<td> </td>
<td><span id="total">0</span></td>
</tr>
</tfoot>
</table>
<button type="button" onClick="AddItem();">Agregar item.</button>
</div>
<input type="submit" value="Enviar" />
</form>
</body>
</html>