CODEWITHSUNDEEP
jqueryhtmlasp.net-mvc
xFlowDev
xFlowDev

Reputation: 205

Calculate price in dynamically created table

I'm calculating a price for a dynamically generated table with this:

        var lAnzahl = 0;
    $("#ArtikelTabelle > tbody").on("keyup", "tr > td > input.anzahl", function () {
        lAnzahl = $(".anzahl").val();
    });

    var lPreis = 0;
    $("#ArtikelTabelle > tbody").on("keyup", "tr > td > input.preis", function () {
        var aa = $(".preis").val();
        var bb = aa.replace(",", ".");
        lPreis = parseFloat(bb);

    });

    $("#ArtikelTabelle > tbody").on("keyup", "tr > td > input.preis ,tr > td > input.anzahl ", function () {
        var lGesamt = lAnzahl * lPreis;
        var lAusgabe = lGesamt.toFixed(2).replace(".", ",");
        $("#gesamtpreis").empty();
        $("#gesamtpreis").append(": " + lAusgabe + "€");
        lGesamt = 0;
        lAusgabe = 0;
    });

But it only works for the first row.
If I add another row via button click and entering a price it keeps the price calculated from the first row but does nothing with the next prices or amounts I enter.

My Table is generated with a javascript on document ready (using the content in this append on button click):

        $("#add_row").click(function () {
        lZeile++;
        $("#ArtikelTabelle > tbody").append('<tr id="reihe' + lZeile + '">' +
            '<td rowspan="2"><b>' + (lZeile + 1) + '</b></td>' +
            '<td><input class="form-control" id="ccTabelle_' + lZeile + '__ccArtikelNr" name="ccTabelle[' + lZeile + '].ccArtikelNr" type="text" value="" placeholder="Artikelnummer"/></td>' +
            '<td><input class="form-control" data-val="true" data-val-required="Das Feld &quot;Warentarif-Nr&quot; ist erforderlich." id="ccTabelle_' + lZeile + '__ccWarentarifNr anzahl" name="ccTabelle[' + lZeile + '].ccWarentarifNr" type="text" value="" placeholder="Warentarifnummer"/></td>' +
            '<td><input class="form-control anzahl" data-val="true" data-val-number="Das Feld &quot;Anzahl&quot; muss eine Zahl sein." data-val-required="Das Feld &quot;Anzahl&quot; ist erforderlich." id="ccTabelle_' + lZeile + '__ccAnzahl" name="ccTabelle[' + lZeile + '].ccAnzahl" type="text" placeholder="Anzahl" /></td>' +
            '<td><input class="form-control preis" data-val="true" data-val-number="Das Feld &quot;Einzelpreis&quot; muss eine Zahl sein." data-val-required="Das Feld &quot;Einzelpreis&quot; ist erforderlich." id="ccTabelle_' + lZeile + '__ccEinzelpreis" name="ccTabelle[' + lZeile + '].ccEinzelpreis" type="text" placeholder="Einzelpreis"/></td>' +
            '<td rowspan="2"><a class="btn btn-default delete_row" data-rowid="' + lZeile + '">Artikel löschen</a></td>' +
            '</tr>' +
            '<tr id="text' + lZeile + '">' +
            '<td colspan="4"><textarea class="form-control" data-val="true" data-val-required="Das Feld &quot;Inhaltsbeschreibung&quot; ist erforderlich." id="ccTabelle_' + lZeile + '__ccInhaltsbeschreibung" name="ccTabelle[' + lZeile + '].ccInhaltsbeschreibung" placeholder="Inhalt">' +
            '</textarea></td></tr>');

I pretty sure that i need to get the content for each row using a for-loop, but what I tried so far didn't work. How do I calculate the price for all rows ?

Upvotes: 0

Views: 212

Answers (2)

user3559349
user3559349

Reputation:

If your wanting to calculate the total of all rows where the subtotal of each row is the value of lAnzahl multiplied by lPreis, then the script would be

$('#ArtikelTabelle').on('change', '.anzahl, .preis', function() {
  var total = new Number();
  // loop each even row
  var rows = $('#ArtikelTabelle').find('tr:even');
  $.each(rows, function() {
    var lAnzahl = parseFloat($(this).find('.anzahl').val());
    if (isNaN(lAnzahl)) {
      return;
    }
    var lPreis  = parseFloat($(this).find('.preis').val().replace(",", "."));
    if (isNaN(lPreis)) {
      return;
    }
    total += lAnzahl * lPreis; // update total
  });
  // format total
  total = total.toFixed(2).replace(".", ",");
  $("#gesamtpreis").text(': ' + total + '€');
});

Upvotes: 1

xFlowDev
xFlowDev

Reputation: 205

The main problem was that I wasn't getting the total of each rows, with the help from the answer of Stephan Muecke(big thanks to him), I managed to do this:

$("#ArtikelTabelle > tbody").on("change", "tr > td > input.preis ,tr > td > input.anzahl ", function () {
            var lGesamt = 0;

            $("#ArtikelTabelle > tbody > tr").each(function () {
                var lAnzahl = $(this).find("td > input.anzahl").val();
                var lPreis = $(this).find("td > input.preis").val();
                if (!$.isEmptyObject(lAnzahl) || !$.isEmptyObject(lPreis)) {
                    lAnzahl = parseFloat(lAnzahl);
                    lPreis = parseFloat(lPreis.replace(",", "."));
                    lGesamt += lPreis * lAnzahl;
                }
            });
            lGesamt = lGesamt.toFixed(2).replace(".", ",");
            if (lGesamt != "NaN") {
                $("#gesamtpreis").text(": " + lGesamt + "€");
            }
            else {
                $("#gesamtpreis").text(": ");
            }

        });

The script, of Stephan Muecke wasn't finding the fields, so I adjusted the referencing. And added the condition to only calculate if either one of them is filled. After that I'm displaying it, only if it's a number.

Upvotes: 0

Related Questions