Question

我正在计算动态生成的表的价格：

        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;
    });

但它只适用于第一行如果我通过按钮点击添加另一行并输入价格，它会保留从第一行计算的价格，但对我输入的下一个价格或金额不做任何操作。

我的表格是在文档就绪的情况下使用javascript生成的（使用此按钮点击此append中的内容）：

        $("#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>');

我非常确定我需要使用for循环获取每行的内容，但到目前为止我尝试的内容都不起作用。如何计算所有行的价格？

Answer 1

如果您想要计算每行小计的所有行的总和是lAnzahl的值乘以lPreis，那么脚本将是

$('#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 + '€');
});

Answer 2

主要问题是我没有得到每一行的总数，在Stephan Muecke的回答的帮助下（非常感谢他），我设法做到了这一点：

$("#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(": ");
            }

        });

Stephan Muecke的剧本没有找到字段，所以我调整了引用。并添加条件仅计算其中任何一个是否填充。之后，我正在显示它，只有它是一个数字。

计算动态创建的表中的价格

2 个答案: