javascript - 使用 jQuery 删除更新总数据的表行

Question

我有一个表格，可以在其中添加多个数字并创建一个添加更多按钮，还可以在表格上添加新行并使用 jQuery 计算所有总数。现在，当我删除新行时，总值不会更新，但当我单击某些输入字段时，它就会更新。现在我的问题是

How can I make the total value auto-update when the row is removed.

下面是我的代码:

function addMore() {
  var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>');
        new_raw.insertBefore('#my_new_raw');
        $("#myTable").on('click', '.remove', function() {
            $(this).parent().parent().remove();
        });
}


$(document).on('blur keyup', '.addData', function(e) {
    var sum = 0;
    $('.addData').each(function(i) {
        if (!isNaN(this.value) && this.value.length != 0) {
            if ($(this).hasClass('addData')) {
                sum += parseFloat(this.value);
            }
        }
    });
    $('#my_total').val(sum.toFixed(2));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="table" id="myTable">
  <tbody>
    <tr>
      <td>Value 1</td>
      <td><input type="number" class="addData"></td>
     </tr>
     <tr>
      <td>Value 2</td>
      <td><input type="number" class="addData"></td>
     </tr>
     <tr id="my_new_raw">
      <td><a href="javascript:void(0);" onclick="addMore()">Add More</a></td>
      <td></td>
     </tr>
     <tr>
      <td>Total</td>
      <td><input type="number" readonly id="my_total"></td>
     </tr>
  </tbody>
</table>

I know I didn't call a function to update the total, because I don't know how. Help me here. Thanks for advance

Answer 1

TL;DR 只需再次计算即可。

你的计算方式已经很好了，只要用一个函数包装它，然后你想什么时候调用它就可以了。

function addMore() {
  var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>');
        new_raw.insertBefore('#my_new_raw');
        $("#myTable").on('click', '.remove', function() {
            $(this).parent().parent().remove();
            calculate();
        });
}

function calculate() {
    var sum = 0;
    $('.addData').each(function(i) {
        if (!isNaN(this.value) && this.value.length != 0) {
            if ($(this).hasClass('addData')) {
                sum += parseFloat(this.value);
            }
        }
    });
    $('#my_total').val(sum.toFixed(2));
}


$(document).on('blur keyup', '.addData', function(e) {
    calculate();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="table" id="myTable">
  <tbody>
    <tr>
      <td>Value 1</td>
      <td><input type="number" class="addData"></td>
     </tr>
     <tr>
      <td>Value 2</td>
      <td><input type="number" class="addData"></td>
     </tr>
     <tr id="my_new_raw">
      <td><a href="javascript:void(0);" onclick="addMore()">Add More</a></td>
      <td></td>
     </tr>
     <tr>
      <td>Total</td>
      <td><input type="number" readonly id="my_total"></td>
     </tr>
  </tbody>
</table>