在这里我需要帮助,每当我从中间删除一行而不是从动态创建的最后一行删除那一行时,小计将无法计算
我使用jquery创建了一个动态表单,它可以完美运行,数量和价格以及小计和最终总计都可以完美运行。即使当我删除一行时,它也可以正确地重新计算,但是当我从顶部删除一行(可以说是五行中的第三行)时,它将很好地重新计算,但是当我尝试添加新行时,它不会计算出小计和最终总计,直到我删除每一行并从头开始。请我帮忙
<h3>List here</h3>
<table id="add-me" class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Sub-Total</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr id="remove_me">
<td class="col-md-7">
<input type="text" id="description1"
name="description[]" class="form-control">
</td>
<td class="col-md-1">
<input type="text" value="0" id="quantity1"
name="quantity[]" class="form-control number_only" autofocus="" >
</td>
<td class="col-md-2">
<input type="text" value="0" id="price1"
name="selling_price[]" class="form-control price number_only">
</td>
<td class="col-md-2">
<input type="number" value="0.0" class="form-
control" id="sub_total1" name="sub-total" readonly>
</td>
<td class="col-md-2">
<button id="add-form" type="button" class="btn
btn-default" style="font-weight: 600;font-size: 20px;">+</button>
</td>
</tr>
</tbody>
</table>
<div class="col-md-3 form-group" style="float: right;">
<input type="number" value="0.0" class="form-control
final_total_amount" id="final_total_amount" name="total" readonly >
<input type="hidden" name="total_item" id="total_item"
value="1" />
</div>
$(document).ready(function(){
var final_total_amt = $('#final_total_amt').text();
var count = 1;
$(document).on('click', '#add-form', function(){
count++;
$('#total_item').val(count);
$('#add-me').append('<tr id="row_id_'+count+'"><td class="col-md-7">
<input type="text" id="description'+count+'" name="description[]"
class="form-control"></td><td class="col-md-1"><input type="text"
value="0" id="quantity'+count+'" name="quantity[]" class="form-control
number_only" autofocus="" ></td><td class="col-md-2"><input
type="text"
value="0" id="price'+count+'" name="selling_price[]" class="form-control
price number_only"></td><td class="col-md-2"><input type="text"
value="0.0" class="form-control" id="sub_total'+count+'" name="sub-
total"
readonly></td><td class="col-md-2"><button type="button" name="remove"
id="'+count+'" class="btn btn-danger remove">X</button></td></tr> ');
});
$(document).on('click', '.remove', function(){
var row_id = $(this).attr("id");
var total_item_amount = $('#sub_total'+row_id).val();
var final_amount = $('#final_total_amount').text();
var result_amount = parseFloat(final_amount) -
parseFloat(total_item_amount);
$('#final_total_amount').text(result_amount);
$('#row_id_'+row_id).remove();
count--;
$('#final_total_amount').val(result_amount);
//cal_final_total();
//$('#sub_total').val(result_amount);
});
function cal_final_total(count)
{
var final_item_total = 0;
for(j=1; j<=count; j++)
{
var quantity = 0;
var price = 0;
var actual_amount = 0;
var item_total = 0;
quantity = $('#quantity'+j).val();
if(quantity > 0)
{
price = $('#price'+j).val();
if(price > 0)
{
actual_amount = parseFloat(quantity) * parseFloat(price);
$('#sub_total'+j).val(actual_amount);
item_total = parseFloat(actual_amount) +
parseFloat(final_item_total);
$('#final_total_amount').val(item_total);
//final_item_total = parseFloat(item_total) +
parseFloat(actual_amount);
//$('#final_total_amount'+j).val(final_item_total);
final_item_total = parseFloat(item_total);
$('#final_total_amount'+j).val(final_item_total);
}
}
}
$('#final_total_amount').text(final_item_total);
}
$(document).on('blur', '.price', function(){
cal_final_total(count);
});
//$(document).on('blur', '.final_total_amount', function(){
// cal_final_total(count);
// });
});
我希望它能正常工作,以便每当我删除并重新添加一行时,它都能正常工作