Quantity、Rate、Total Amount の 3 つのフィールドがあります。いずれかのキーアップ数量またはレート フィールドの場合、合計金額フィールドに金額が表示されます。追加ボタンもあります。誰かが追加ボタンをクリックすると、新しい行と削除リンクが動的に作成されます。私の問題は、数量またはレート フィールドをキー入力すると、calculateSum() 関数が正しく機能することです。2 つの行を作成するとします。合計は 100+(100+100)=300 です。最初のものを削除しても何も変わりません。最後の1つを削除すると、結果は200と表示されますが、正しい結果は100です。ここで間違っている可能性があることを誰かが指摘できますか? どうもありがとう。これが私のコードです：
<html>
<head>
<title>Invoice</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on("keyup",".qty, .rate",function(){
calculateSum();
});
$(document).on("click",".del",function(){
calculateSum();
});
});
function calculateSum() {
var qty = [];
$(".qty").each(function() {
var num = parseFloat(this.value) || 1;
qty.push(num);
});
var rate = [];
$(".rate").each(function() {
var num = parseFloat(this.value) || 0;
rate.push(num);
});
var total = 0;
$('input[name="total_amount[]"]').each(function(i){
var amount = qty[i].toFixed(2)*rate[i].toFixed(2);
total += amount;
$(this).val(amount);
});
$("#sub_total").text(total);
}
</script>
<script type="text/javascript" language='javascript'>
/*
This script is identical to the above JavaScript function.
*/
var ct = 1;
function new_link()
{
ct++;
var div1 = document.createElement('div');
div1.id = ct;
// link to delete extended form elements
var delLink = '<div style="text-align:right;margin-top:-20px"><a class="del" href="javascript:delIt('+ ct +')">Delete</a></div>';
div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink;
document.getElementById('newlink').appendChild(div1);
}
// function to delete the newly added set of elements
function delIt(eleId)
{
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('newlink');
parentEle.removeChild(ele);
}
</script>
<style type="text/css">
table
{
border: 1px solid black;
width: 600px;
}
td
{
border: 1px solid black;
padding:5px 5px 5px 5px;
}
</style>
</head>
<body>
<div id="newlink">
<table cellpadding="0" cellspacing="0">
<tr>
<td>Quantity</td>
<td>Rate</td>
<td>Total Amount</td>
</tr>
<tr>
<td><input class='qty' type='text' name='qty[]'/></td>
<td><input class='rate' type='text' name='rate[]'/></td>
<td><input class='total_amount' type='text' name='total_amount[]'/></td>
</tr>
</table>
</div>
<div id="sub_total">0</div>
<input type="button" value="Add" onclick="new_link()"/>
<div id="newlinktpl" style="display:none">
<table cellpadding="0" cellspacing="0">
<tr>
<td><input class='qty' type='text' name='qty[]'/></td>
<td><input class='rate' type='text' name='rate[]'/></td>
<td><input class='total_amount' type='text' name='total_amount[]'/></td>
</tr>
</table>
</div>
</body>
</html>