1

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>&nbsp;</td>
					<td>&nbsp;</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>

0

1 respuesta 1

5

El detalle lo tienes al momento de llamar la función Calcular; el valor antes de la modificación no se esta restando a Total (al final de la tabla) solo estas sumando el nuevo valor (de la modificación).

Te sugiero realices el cálculo de todos elementos existentes (practicamente recorrer todos los elemento y obtener el totalitem e ir sumándolo, o agregar un nuevo parámetro a 'Calcular' en el cual pases el valor que tenia antes de su modificación para restarlo para al final hacer algo como:

total.innerHTML = parseFloat(total.innerHTML)+totalitem-valorAntesModificar;

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:

  1. 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 .
6
  • Muchas gracias! :D Commented el 28 mar. 2017 a las 22:32
  • @JhosselinGiménez sí, con gusto. Quedo en espera.
    – user34391
    Commented el 29 mar. 2017 a las 1:24
  • @JhosselinGiménez ya estoy revisándolo, te comento tan pronto concluya.
    – user34391
    Commented el 29 mar. 2017 a las 1:34
  • @JhosselinGiménez ¿como te puedo hacer llegar los cambios?
    – user34391
    Commented el 29 mar. 2017 a las 2:08
  • Continuemos el debate en el chat.
    – user34391
    Commented el 29 mar. 2017 a las 2:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.