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

Question

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

我想实现的是计算输入数据的可能值(相加(，还可以创建一个add more按钮来添加新行，并可以删除扩展的行，然后自动计算总值。

$(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>