0
我做了一個動態的表格/表格，我無法正確計算新添加的行。jQuery動態表格計算
所有的靜態部分都很好，但是當我添加一個新行時，行的ID和類與函數不匹配......新添加的行根本不計算在內。 有人可以幫忙嗎？
<div>
<h2>Offer</h2>
<form>
<table id="t1">
<tr>
<th><button type="button" class="addRow">Add</button></th>
<th>Quantity</th>
<th>Price per hour</th>
<th>Hours</th>
<th>Total</th>
</tr>
<tr>
<td><select name="personal"><optgroup label="Personal"><option value="köche">Köche</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekräfte">Servicekräfte</option></optgroup></select></td>
<td><input name="anzahl" class="amount" value="" /></td>
<td><input name="preisps" class="amount" value="" /></td>
<td><input name="stunden" class="amount" value="" /></td>
<td><input name="total" class="total" id="total1" value="" readonly="readonly" /></td>
</tr>
</table>
<br />
<table id="t2">
<tr>
<td>Netto =<br></td>
<td><input id="netto" readonly="readonly" name="netto" type="text" value=""></td>
</tr>
<tr>
<td>Steuer 19% =<br></td>
<td><input id="steuer" readonly="readonly" name="steuer" type="text" value=""></td>
</tr>
<tr>
<td>Brutto =<br></td>
<td><input id="brutto" readonly="readonly" name="brutto" type="text" value=""></td>
</tr>
</table>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</div>
<script>
// main function when page is opened
$(document).ready(function() {
// function for adding a new row
var r=1;
$('.addRow').click(function(){
r++;
$('#t1').append('<tr id="row'+r+'"><td><select name="personal"><optgroup label="Personal"><option value="köche">Köche</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekräfte">Servicekräfte</option></optgroup></select></td><td><input class="amount" value="" /></td><td><input class="amount" value="" /></td><td><input class="amount" value="" /></td><td><input class="total" value="" readonly="readonly" /></td><td><button type="button" name="remove" id="'+r+'" class="btn_remove">X</button></td></tr>');
});
// remove row when X is clicked
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
// calculate everything
$(document).on("keyup", ".amount", calcAll);
});
// function for calculating everything
function calcAll() {
// calculate total for one row
var product = 1;
$(".amount").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
product *= parseFloat(this.value);
}
$("#total1").val(product.toFixed(2));
});
// sum all totals
var sum = 0;
$(".total").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
// show values in netto, steuer, brutto fields
$("#netto").val(sum.toFixed(2));
$("#steuer").val(sum.toFixed(2) * 0.19);
$("#brutto").val(parseFloat(sum.toFixed(2)) + parseFloat(($("#steuer").val())));
}
</script>
這裏是我的源代碼：
準確的問題在哪裏？我添加了數字和行，它似乎工作正常 –
嘗試添加一個新行（單擊按鈕添加），然後寫入新行的值。它不會像它應該那樣工作。它將所有內容寫入第一行的最後一列。 :( – lewis4u
http://jsfiddle.net/p2Hbm/97/這是最後一個版本，現在它的工作原理...非常感謝@MK Wierzba – lewis4u