使用jQuery删除更新总数据的表行 [英] Remove table rows updating total data using jQuery

问题描述

我有一个表，可以在其中添加多个数字并创建一个add more按钮，还可以在表上添加新行并使用jQuery计算总和.现在，当我删除新行时，总值不会更新，但是当我单击某些input fields然后更新时.现在我的问题是

I have a table where I can add multiple numbers and create an add more button also to add a new row on the table and calculate all total using jQuery. Now when I remove the new row, the total value is not updated, but when I click some of the input fields and then it is updated. Now my question is

删除行后，如何使总值自动更新.

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

推荐答案

如果使用blur和keyup，则使用箭头更改数字值时，总计不会更改.我更喜欢input事件.单击删除时，您可以触发input事件:

If you use blur and keyup, the total will not be changed when changing the number value with arrow. I prefer input event instead. You can trigger the input event when clicking on Remove:

$('.addData').trigger('input');

工作代码示例:

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();
    $('.addData').trigger('input');
  });
}

$(document).on('input', '.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>

OR::通过使用功能

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

$(document).on('input', '.addData', function(e) {
  updateTotal();
});

function updateTotal(){
  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>

这篇关于使用jQuery删除更新总数据的表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！