javascript - jQuery动态表计算

Question

我制作了一个动态表单/表格，但无法正确计算新添加的行。

对于静态部分来说一切都很好，但是当我添加新行时，行的 ID 和类与函数不匹配...根本不计算新添加的行。 有人可以帮忙吗？

<div>
<h2>Offer</h2>
<form>
<table id="t1">
  <tr>
    <th><button type="button" class="addRow">Add</button></th>
    <th>Quantity</th>
    <th>Price per hour</th>
    <th>Hours</th>
    <th>Total</th>
  </tr>
  <tr>
    <td><select name="personal"><optgroup label="Personal"><option value="k&ouml;che">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekr&auml;fte">Servicekr&auml;fte</option></optgroup></select></td>
    <td><input name="anzahl" class="amount" value="" /></td>
    <td><input name="preisps" class="amount" value="" /></td>
    <td><input name="stunden" class="amount" value="" /></td>
    <td><input name="total" class="total" id="total1" value="" readonly="readonly" /></td>
  </tr>
</table>

<br />

<table id="t2">
  <tr>
    <td>Netto =<br></td>
    <td><input id="netto" readonly="readonly" name="netto" type="text" value=""></td>
  </tr>
  <tr>
    <td>Steuer 19% =<br></td>
    <td><input id="steuer" readonly="readonly" name="steuer" type="text" value=""></td>
  </tr>
  <tr>
    <td>Brutto =<br></td>
    <td><input id="brutto" readonly="readonly" name="brutto" type="text" value=""></td>
  </tr>
</table>
    <br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
  </form>
</div>


<script>  
// main function when page is opened
$(document).ready(function () {

      // function for adding a new row
      var r=1;
      $('.addRow').click(function(){  
          r++;  
          $('#t1').append('<tr id="row'+r+'"><td><select name="personal"><optgroup label="Personal"><option value="k&ouml;che">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekr&auml;fte">Servicekr&auml;fte</option></optgroup></select></td><td><input class="amount" value="" /></td><td><input class="amount" value="" /></td><td><input class="amount" value="" /></td><td><input class="total" value="" readonly="readonly" /></td><td><button type="button" name="remove" id="'+r+'" class="btn_remove">X</button></td></tr>');
      });
      // remove row when X is clicked     
      $(document).on('click', '.btn_remove', function(){
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });
      // calculate everything
      $(document).on("keyup", ".amount", calcAll);      
});


// function for calculating everything
function calcAll() {
      // calculate total for one row
      var product = 1;
      $(".amount").each(function () {
            if (!isNaN(this.value) && this.value.length != 0) {
            product *= parseFloat(this.value);
            }
            $("#total1").val(product.toFixed(2));
      });

      // sum all totals
      var sum = 0;
      $(".total").each(function () {
          if (!isNaN(this.value) && this.value.length != 0) {
              sum += parseFloat(this.value);
          }
      });
      // show values in netto, steuer, brutto fields
      $("#netto").val(sum.toFixed(2));
      $("#steuer").val(sum.toFixed(2) * 0.19);
      $("#brutto").val(parseFloat(sum.toFixed(2)) + parseFloat(($("#steuer").val())));
}
</script>

这是我的源代码:

http://jsfiddle.net/p2Hbm/86/

Answer 1

我举了一个例子来说明如何在 jsFiddle 上执行此操作: https://jsfiddle.net/gtcazp7s/

    // main function when page is opened
    $(document).ready(function () {

        // function for adding a new row
        var r = 1;
        $('.addRow').click(function () {
            r++;
            $('#t1').append('<tr id="row' + r + '" class="item"><td><select name="personal"><optgroup label="Personal"><option value="k&ouml;che">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekr&auml;fte">Servicekr&auml;fte</option></optgroup></select></td><td><input class="qnty amount" value="" /></td><td><input class="price amount" value="" /></td><td><input class="hours amount" value="" /></td><td><input class="total" value="" readonly="readonly" /></td><td><button type="button" name="remove" id="' + r + '" class="btn_remove">X</button></td></tr>');
        });
        // remove row when X is clicked
        $(document).on('click', '.btn_remove', function () {
            var button_id = $(this).attr("id");
            $('#row' + button_id + '').remove();
        });
        // calculate everything
        $(document).on("keyup", ".amount", calcAll);
        //$(".amount").on("change", calcAll);
    });

    // function for calculating everything
    function calcAll() {
        // calculate total for one row

        $(".item").each(function () {
            var qnty = 1;
            var price = 1;
            var hours = 1;
            var total = 1;
            if (!isNaN(parseFloat($(this).find(".qnty").val()))) {
                qnty = parseFloat($(this).find(".qnty").val());
            }
            if (!isNaN(parseFloat($(this).find(".price").val()))) {
                price = parseFloat($(this).find(".price").val());
            }
            if (!isNaN(parseFloat($(this).find(".hours").val()))) {
                hours = parseFloat($(this).find(".hours").val());
            }
            total = qnty * price * hours;
            $(this).find(".total").val(total.toFixed(2));
        });

        //$(".amount").each(function () {

        //    if (!isNaN(this.value) && this.value.length != 0) {
        //        product *= parseFloat(this.value);
        //    }
        //    $("#total1").val(product.toFixed(2));
        //    if (!isNaN($(this).find(".qnty"))) {

        //    }
        //});

        // sum all totals
        var sum = 0;
        $(".total").each(function () {
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });
        // show values in netto, steuer, brutto fields
        // show values in netto, steuer, brutto fields
        $("#netto").val(sum.toFixed(2));
        $("#steuer").val(parseFloat(sum * 0.19).toFixed(2));
        $("#brutto").val(parseFloat(sum.toFixed(2) + parseFloat(($("#steuer").val()))).toFixed(2));
    }

这是 html 部分:

<div>
    <h2>Offer</h2>
    <form>
        <table id="t1">
            <tr>
                <th><button type="button" class="addRow">Add</button></th>
                <th>Quantity</th>
                <th>Price per hour</th>
                <th>Hours</th>
                <th>Total</th>
            </tr>
            <tr class="item">
                <td><select name="personal"><optgroup label="Personal"><option value="k&ouml;che">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekr&auml;fte">Servicekr&auml;fte</option></optgroup></select></td>
                <td><input name="anzahl" class="qnty amount" value="" /></td>
                <td><input name="preisps" class="price amount" value="" /></td>
                <td><input name="stunden" class="hours amount" value="" /></td>
                <td><input name="total" class="total" id="total1" value="" readonly="readonly" /></td>
            </tr>
        </table>

        <br />

        <table id="t2">
            <tr>
                <td>Netto =<br></td>
                <td><input id="netto" readonly="readonly" name="netto" type="text" value=""></td>
            </tr>
            <tr>
                <td>Steuer 19% =<br></td>
                <td><input id="steuer" readonly="readonly" name="steuer" type="text" value=""></td>
            </tr>
            <tr>
                <td>Brutto =<br></td>
                <td><input id="brutto" readonly="readonly" name="brutto" type="text" value=""></td>
            </tr>
        </table>
        <br>
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </form>
</div>