javascript - 使用 JQuery 删除表行自动计算总值

Question

我创建了一个像这样的函数 https://stackoverflow.com/a/52700221/8826120之前是可以的，但是现在删除扩展行后无法自动计算总值。我没有改变任何东西，而且之前也运行得很好，有人能解释一下我遇到的问题吗？

我想要实现的是计算输入数据的可能值(总共添加)，并创建一个添加更多按钮来添加新行，并且可以删除扩展的行，然后自动计算总值(value)。

$(document).on('input', '.wdv, .addb4, .addafter, .delete, .depPercent', updateDepIT);

function updateDepIT() {
    updateDepRow($(this).closest("tr"));
    updateDepColumn($(this).closest("td"), $(this));
    updateDepTotal($(this).closest("table"));
}

function updateDepRow($row) {
    var sum = 0, sum2 = 0, sum3 = 0, sum4 = 0, calcu = 0, current_wdv = 0;
    $row.find('.wdv, .addb4, .addafter, .delete, .depPercent').each(function(i) {
        if (!isNaN(this.value) && this.value.length != 0) {
            if ($(this).hasClass('wdv')) {
                sum += parseFloat(this.value);
            } else if ($(this).hasClass('addb4')) {
                sum2 += parseFloat(this.value);
            } else if ($(this).hasClass('addafter')) {
                sum3 += parseFloat(this.value);
            } else if ($(this).hasClass('delete')) {
                sum4 += parseFloat(this.value);
            } else if ($(this).hasClass('depPercent')) {
                var total = $row.find('.depItTotal').val();
                var addAf2 = $row.find('.addafter').val();
                if (addAf2 == '') {
                    var addAf = 0;
                } else {
                    addAf = $row.find('.addafter').val();
                }
                var percent = $(this).val();
                calcu = Math.round(( (parseInt(total) - parseInt(addAf)) * (parseInt(percent)/100)) + (( parseInt(addAf) * (parseInt(percent)/100)/2 )));
                current_wdv = (parseInt(total) - parseInt(calcu));
            }
        }
    });
    $row.find('.depItTotal').val(((sum + sum2 + sum3) - sum4));
    $row.find('.depItdep').val(calcu);
    $row.find('.depWdv_cy').val(current_wdv);
}

function updateDepColumn($col, $input) {
    var index = $col.index() + 1;
    var sum = 0;

    $('#dep_it_table td:nth-child(' + index + ')').find('input').each(function(i) {
        if (!isNaN(this.value) && this.value.length != 0 && !$(this).attr('id')) {
            sum += parseFloat(this.value);
        }
    });

    if ($input.hasClass('wdv')) {
        $('#wdv_total').val(sum);
    } else if ($input.hasClass('addb4')) {
        $('#addb4_total').val(sum);
    } else if ($input.hasClass('addafter')) {
        $('#addafter_total').val(sum);
    } else if ($input.hasClass('delete')) {
        $('#delete_total').val(sum);
    }
}

function updateDepTotal($table) {
    var sum = 0, sum2 = 0, sum3 = 0;
    $table.find('.depItTotal, .depItdep, .depWdv_cy').each(function(i) {
        if (!isNaN(this.value) && this.value.length != 0) {
            if ($(this).hasClass('depItTotal')) {
                sum += parseFloat(this.value);
            } else if ($(this).hasClass('depItdep')) {
                sum2 += parseFloat(this.value);
            } else if ($(this).hasClass('depWdv_cy')) {
                sum3 += parseFloat(this.value);
            }
        }
    });
    $('#dep_all_total').val(sum);
    $('#dep_total').val(sum2);
    $('#wdv_cy_total').val(sum3);
}

function addMoreDepIT() {
  var new_raw = $(
      '<tr>'+
          '<td><a href="javascript:void(0);" style="padding:0px;margin-top:-5px;" class="removeDepIt">Remove</a></td>'+
          '<td><input type="number" min="0" name="depIT_wdv[]" id="" class="form-control wdv"></td>'+
          '<td><input type="number" min="0" name="depIT_addb4[]" id="" class="form-control addb4"></td>'+
          '<td><input type="number" min="0" name="depIT_addafter[]" id="" class="form-control addafter"></td>'+
          '<td><input type="number" min="0" name="depIT_del[]" id="" class="form-control delete"></td>'+
          '<td><input type="text" name="depIT_total[]" id="" class="form-control depItTotal" readonly></td>'+
          '<td><input type="number" min="0" name="depIT_percent[]" id="" class="form-control depPercent"></td>'+
          '<td><input type="text" name="depIT_depre[]" id="" class="form-control depItdep" readonly></td>'+
          '<td><input type="text" name="depIT_wdvCY[]" id="" class="form-control depWdv_cy" readonly></td>'+
      '</tr>'
  );
  new_raw.insertBefore('#addDepIt');
  $("#dep_it_table").on('click', '.removeDepIt', function() {
      var row = $(this).closest('tr');
      row.find('.wdv, .addb4, .addafter, .delete, .depPercent, .depItTotal, .depItdep, .depWdv_cy').each(function(){
          $(this).val(0);
          $(this).change();
      });
      row.remove();
  });
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<table class="table table-sm" id="dep_it_table">
  <thead>
    <tr>
      <th>Depreciation of Assets</th>
      <th>W.D.V as on 01.04.2017</th>
      <th>Additions Before 30th September</th>
      <th>Additions after 30th September</th>
      <th>Deletions</th>
      <th>TOTAL</th>
      <th>Rateof Depn</th>
      <th>Depreciation</th>
      <th>W.D.V  as on 31.03.2018</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>-</td>
      <td><input type="number" min="0" name="depIT_wdv[]" id="" class="form-control wdv"></td>
      <td><input type="number" min="0" name="depIT_addb4[]" id="" class="form-control addb4"></td>
      <td><input type="number" min="0" name="depIT_addafter[]" id="" class="form-control addafter"></td>
      <td><input type="number" min="0" name="depIT_del[]" id="" class="form-control delete"></td>
      <td><input type="text" name="depIT_total[]" id="" class="form-control depItTotal" readonly></td>
      <td><input type="number" min="0" name="depIT_percent[]" id="" class="form-control depPercent"></td>
      <td><input type="text" name="depIT_depre[]" id="" class="form-control depItdep" readonly></td>
      <td><input type="text" name="depIT_wdvCY[]" id="" class="form-control depWdv_cy" readonly></td>
  </tr>
  <tr id="addDepIt">
      <td><a href="javascript:void(0)" class="btn btn-primary" style="padding:0px;" onclick="addMoreDepIT()"><i class="ft-plus hidden-lg-up"></i>&nbsp;Add More</a></td>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
      <th>Total</th><input type="hidden" name="wdv_name_total" value="Total">
      <td><input type="number" min="0" name="wdv_total" id="wdv_total" class="form-control" readonly></td>
      <td><input type="number" min="0" name="addb4_total" id="addb4_total" class="form-control" readonly></td>
      <td><input type="number" min="0" name="addafter_total" id="addafter_total" class="form-control" readonly></td>
      <td><input type="number" min="0" name="delete_total" id="delete_total" class="form-control" readonly></td>
      <td><input type="number" min="0" name="dep_all_total" id="dep_all_total" class="form-control" readonly></td>
      <td><input type="number" min="0" name="" id="" class="form-control" readonly></td>
      <td><input type="number" min="0" name="dep_total" id="dep_total" class="form-control" readonly></td>
      <td><input type="number" min="0" name="wdv_cy_total" id="wdv_cy_total" class="form-control" readonly></td>
    </tr>
  </tbody>
</table>

Answer 1

删除行后触发输入事件

$('.wdv, .addb4, .addafter, .delete, .depPercent').trigger('input');

$(document).on('input', '.wdv, .addb4, .addafter, .delete, .depPercent', updateDepIT);

function updateDepIT() {
    updateDepRow($(this).closest("tr"));
    updateDepColumn($(this).closest("td"), $(this));
    updateDepTotal($(this).closest("table"));
}

function updateDepRow($row) {
    var sum = 0, sum2 = 0, sum3 = 0, sum4 = 0, calcu = 0, current_wdv = 0;
    $row.find('.wdv, .addb4, .addafter, .delete, .depPercent').each(function(i) {
        if (!isNaN(this.value) && this.value.length != 0) {
            if ($(this).hasClass('wdv')) {
                sum += parseFloat(this.value);
            } else if ($(this).hasClass('addb4')) {
                sum2 += parseFloat(this.value);
            } else if ($(this).hasClass('addafter')) {
                sum3 += parseFloat(this.value);
            } else if ($(this).hasClass('delete')) {
                sum4 += parseFloat(this.value);
            } else if ($(this).hasClass('depPercent')) {
                var total = $row.find('.depItTotal').val();
                var addAf2 = $row.find('.addafter').val();
                if (addAf2 == '') {
                    var addAf = 0;
                } else {
                    addAf = $row.find('.addafter').val();
                }
                var percent = $(this).val();
                calcu = Math.round(( (parseInt(total) - parseInt(addAf)) * (parseInt(percent)/100)) + (( parseInt(addAf) * (parseInt(percent)/100)/2 )));
                current_wdv = (parseInt(total) - parseInt(calcu));
            }
        }
    });
    $row.find('.depItTotal').val(((sum + sum2 + sum3) - sum4));
    $row.find('.depItdep').val(calcu);
    $row.find('.depWdv_cy').val(current_wdv);
}

function updateDepColumn($col, $input) {
    var index = $col.index() + 1;
    var sum = 0;

    $('#dep_it_table td:nth-child(' + index + ')').find('input').each(function(i) {
        if (!isNaN(this.value) && this.value.length != 0 && !$(this).attr('id')) {
            sum += parseFloat(this.value);
        }
    });

    if ($input.hasClass('wdv')) {
        $('#wdv_total').val(sum);
    } else if ($input.hasClass('addb4')) {
        $('#addb4_total').val(sum);
    } else if ($input.hasClass('addafter')) {
        $('#addafter_total').val(sum);
    } else if ($input.hasClass('delete')) {
        $('#delete_total').val(sum);
    }
}

function updateDepTotal($table) {
    var sum = 0, sum2 = 0, sum3 = 0;
    $table.find('.depItTotal, .depItdep, .depWdv_cy').each(function(i) {
        if (!isNaN(this.value) && this.value.length != 0) {
            if ($(this).hasClass('depItTotal')) {
                sum += parseFloat(this.value);
            } else if ($(this).hasClass('depItdep')) {
                sum2 += parseFloat(this.value);
            } else if ($(this).hasClass('depWdv_cy')) {
                sum3 += parseFloat(this.value);
            }
        }
    });
    $('#dep_all_total').val(sum);
    $('#dep_total').val(sum2);
    $('#wdv_cy_total').val(sum3);
}

function addMoreDepIT() {
  var new_raw = $(
      '<tr>'+
          '<td><a href="javascript:void(0);" style="padding:0px;margin-top:-5px;" class="removeDepIt">Remove</a></td>'+
          '<td><input type="number" min="0" name="depIT_wdv[]" id="" class="form-control wdv"></td>'+
          '<td><input type="number" min="0" name="depIT_addb4[]" id="" class="form-control addb4"></td>'+
          '<td><input type="number" min="0" name="depIT_addafter[]" id="" class="form-control addafter"></td>'+
          '<td><input type="number" min="0" name="depIT_del[]" id="" class="form-control delete"></td>'+
          '<td><input type="text" name="depIT_total[]" id="" class="form-control depItTotal" readonly></td>'+
          '<td><input type="number" min="0" name="depIT_percent[]" id="" class="form-control depPercent"></td>'+
          '<td><input type="text" name="depIT_depre[]" id="" class="form-control depItdep" readonly></td>'+
          '<td><input type="text" name="depIT_wdvCY[]" id="" class="form-control depWdv_cy" readonly></td>'+
      '</tr>'
  );
  new_raw.insertBefore('#addDepIt');
  
  }
  $("#dep_it_table").on('click', '.removeDepIt', function() {
      var row = $(this).closest('tr');
      var prev = row.prev();
      row.remove();
      prev.find('.wdv').trigger('input');
  });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<table class="table table-sm" id="dep_it_table">
  <thead>
    <tr>
      <th>Depreciation of Assets</th>
      <th>W.D.V as on 01.04.2017</th>
      <th>Additions Before 30th September</th>
      <th>Additions after 30th September</th>
      <th>Deletions</th>
      <th>TOTAL</th>
      <th>Rateof Depn</th>
      <th>Depreciation</th>
      <th>W.D.V  as on 31.03.2018</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>-</td>
      <td><input type="number" min="0" name="depIT_wdv[]" id="" class="form-control wdv"></td>
      <td><input type="number" min="0" name="depIT_addb4[]" id="" class="form-control addb4"></td>
      <td><input type="number" min="0" name="depIT_addafter[]" id="" class="form-control addafter"></td>
      <td><input type="number" min="0" name="depIT_del[]" id="" class="form-control delete"></td>
      <td><input type="text" name="depIT_total[]" id="" class="form-control depItTotal" readonly></td>
      <td><input type="number" min="0" name="depIT_percent[]" id="" class="form-control depPercent"></td>
      <td><input type="text" name="depIT_depre[]" id="" class="form-control depItdep" readonly></td>
      <td><input type="text" name="depIT_wdvCY[]" id="" class="form-control depWdv_cy" readonly></td>
  </tr>
  <tr id="addDepIt">
      <td><a href="javascript:void(0)" class="btn btn-primary" style="padding:0px;" onclick="addMoreDepIT()"><i class="ft-plus hidden-lg-up"></i>&nbsp;Add More</a></td>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
      <th>Total</th><input type="hidden" name="wdv_name_total" value="Total">
      <td><input type="number" min="0" name="wdv_total" id="wdv_total" class="form-control" readonly></td>
      <td><input type="number" min="0" name="addb4_total" id="addb4_total" class="form-control" readonly></td>
      <td><input type="number" min="0" name="addafter_total" id="addafter_total" class="form-control" readonly></td>
      <td><input type="number" min="0" name="delete_total" id="delete_total" class="form-control" readonly></td>
      <td><input type="number" min="0" name="dep_all_total" id="dep_all_total" class="form-control" readonly></td>
      <td><input type="number" min="0" name="" id="" class="form-control" readonly></td>
      <td><input type="number" min="0" name="dep_total" id="dep_total" class="form-control" readonly></td>
      <td><input type="number" min="0" name="wdv_cy_total" id="wdv_cy_total" class="form-control" readonly></td>
    </tr>
  </tbody>
</table>