Skip to main content
Se agrega funciones modificadas respetando al máximo la estructura actual proporcionada en la consulta realizada.
Origen Enlace
user34391
user34391

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 .

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 .
Origen Enlace
user34391
user34391

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;