3
這是更長的形式的一小部分（粉紅色，綠色和黃色盒/箭頭已經被添加爲清楚起見）：問題與形式計算
原件： 
標記的： 
基本上 - 隨着數字輸入到宿舍 - >檢查（粉紅色框），該值自動求和和經銷商的填充只讀域「總現金」 （這已經在工作）。然後，一旦「退款支付」字段中輸入了一個值（包括零），它就會自動與「總現金」進行彙總並填充「最終總額」字段 - 這對每列都是分開的。這是有效的 - 但我希望我不必強迫用戶輸入Refunds Paid中的值，除非有價值。最後 - 我還需要從「存款」和「經理站」列中的「最終彙總」到自動彙總到「總計存款」，似乎根本沒有工作...
最後 - 我試過要實現一個按鈕來重新計算所有總計，然後點擊「提交」將其轉換爲PDF - 我也被困在那裏。名稱和ID calc - 我願意接受任何最佳實踐解決方案。我會非常樂意做出重大修改 - 作爲一個新手，很多這個採用「我的褲子」編碼。
我很新的JavaScript和JQuery - 所以請溫柔？下面的代碼（有關這一問題的部分，反正）：
HTML
<tr>
<td class="label" colspan="4">Deposit/Safe/Manager Station Count</td>
</tr>
<tr>
<td class="null"></td>
<td class="label">Deposit</td>
<td class="label">Manager Station</td>
<td class="label">Safe</td>
</tr>
<tr>
<td class="label">Quarters</td>
<td class="field"><input type="text" name="depQuarters" class="dep" tabindex="31" /></td>
<td class="field"><input type="text" name="manQuarters" class="man" tabindex="41" /></td>
<td class="field"><input type="text" name="safeQuarters" class="safe" tabindex="51" /></td>
</tr>
<tr>
<td class="label">Coins</td>
<td class="field"><input type="text" name="depCoins" class="dep" tabindex="32" /></td>
<td class="field"><input type="text" name="manCoins" class="man" tabindex="42" /></td>
<td class="field"><input type="text" name="safeCoins" class="safe" tabindex="52" /></td>
</tr>
<tr>
<td class="label">$1 Bills</td>
<td class="field"><input type="text" name="dep1Bills" class="dep" tabindex="33" /></td>
<td class="field"><input type="text" name="man1Bills" class="man" tabindex="43" /></td>
<td class="field"><input type="text" name="safe1Bills" class="safe" tabindex="53" /></td>
</tr>
<tr>
<td class="label">$5 Bills</td>
<td class="field"><input type="text" name="dep5Bills" class="dep" tabindex="34" /></td>
<td class="field"><input type="text" name="man5Bills" class="man" tabindex="44" /></td>
<td class="field"><input type="text" name="safe5Bills" class="safe" tabindex="54" /></td>
</tr>
<tr>
<td class="label">$10 Bills</td>
<td class="field"><input type="text" name="dep10Bills" class="dep" tabindex="35" /></td>
<td class="field"><input type="text" name="man10Bills" class="man" tabindex="45" /></td>
<td class="field"><input type="text" name="safe10Bills" class="safe" tabindex="55" /></td>
</tr>
<tr>
<td class="label">$20 Bills</td>
<td class="field"><input type="text" name="dep20Bills" class="dep" tabindex="36" /></td>
<td class="field"><input type="text" name="man20Bills" class="man" tabindex="46" /></td>
<td class="field"><input type="text" name="safe20Bills" class="safe" tabindex="56" /></td>
</tr>
<tr>
<td class="label">$50 Bills</td>
<td class="field"><input type="text" name="dep50Bills" class="dep" tabindex="37" /></td>
<td class="field"><input type="text" name="man50Bills" class="man" tabindex="47" /></td>
<td class="field"><input type="text" name="safe50Bills" class="safe" tabindex="57" /></td>
</tr>
<tr>
<td class="label">$100 Bills</td>
<td class="field"><input type="text" name="dep100Bills" class="dep" tabindex="38" /></td>
<td class="field"><input type="text" name="man100Bills" class="man" tabindex="48" /></td>
<td class="field"><input type="text" name="safe100Bills" class="safe" tabindex="58" /></td>
</tr>
<tr>
<td class="label">Checks</td>
<td class="field"><input type="text" name="depChecks" class="dep" tabindex="39" /></td>
<td class="field"><input type="text" name="manChecks" class="man" tabindex="49" /></td>
<td class="field"><input type="text" name="safeChecks" class="safe" tabindex="59" /></td>
</tr>
<tr>
<td class="label">Total Cash</td>
<td class="field"><input type="text" name="depTotal" id="depTotal" class="depFinalFactor" readonly /></td>
<td class="field"><input type="text" id="manTotal" name="manTotal" class="manFinalFactor" readonly /></td>
<td class="field"><input type="text" id="safeTotal" name="safeTotal" class="safeFinalFactor" readonly /></td>
</tr>
<tr>
<td class="label">Refunds Paid In</td>
<td class="field"><input type="text" name="depRefunds" id="depRef" class="depFinalFactor" tabindex="40" /></td>
<td class="field"><input type="text" name="manRefunds" tabindex="50" class="manFinalFactor" /></td>
<td class="field"><input type="text" name="safeRefunds" tabindex="60" class="safeFinalFactor" /></td>
</tr>
<tr>
<td class="label">Final Total</td>
<td class="field"><input type="text" name="depFinalTotal" id="depFinalTotal" readonly /></td>
<td class="field"><input type="text" name="manFinalTotal" id="manFinalTotal" readonly /></td>
<td class="field"><input type="text" name="safeFinalTotal" id="safeFinalTotal" readonly /></td>
</tr>
<tr>
<td class="null" colspan="2"></td>
<td class="label">Total to Deposit</td>
<td class="field" id="totalToDeposit"></td>
</tr>
</table>
<input type="button" name="calc" id="calc" value="Recalculate Totals" />
<input style="float: right;" type="submit" name="btn_submit" />
</form>
</body>
</html>
使用Javascript/JQuery的
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".accXPT1").each(function() {
$(this).keyup(function(){
calculateSumForInput(".accXPT1", "#accXPT1Total");
});
});
$(".accXPT2").each(function() {
$(this).keyup(function(){
calculateSumForInput(".accXPT2", "#accXPT2Total");
});
});
$(".accXPT3").each(function() {
$(this).keyup(function(){
calculateSumForInput(".accXPT3", "#accXPT3Total");
});
});
$(".dispXPT1").each(function() {
$(this).keyup(function(){
calculateSumForInput(".dispXPT1", "#dispXPT1Total");
});
});
$(".dispXPT2").each(function() {
$(this).keyup(function(){
calculateSumForInput(".dispXPT2", "#dispXPT2Total");
});
});
$(".dispXPT3").each(function() {
$(this).keyup(function(){
calculateSumForInput(".dispXPT3", "#dispXPT3Total");
});
});
$(".dep").each(function() {
$(this).keyup(function(){
calculateSumForInput(".dep", "#depTotal");
});
});
$(".man").each(function() {
$(this).keyup(function(){
calculateSumForInput(".man", "#manTotal");
});
});
$(".safe").each(function() {
$(this).keyup(function(){
calculateSumForInput(".safe", "#safeTotal");
});
});
$(".depFinalFactor").keyup(function() {
var sum = 0;
$(".depFinalFactor").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
mySum = sum.toFixed(2);
if (mySum == $("#moneyAccountedFor").val()) {
$("#totalToDeposit").css("color", "green");
} else {
$("#totalToDeposit").css("color", "red");
}
$("#depFinalTotal").val(mySum);
$("#totalToDeposit").text(mySum);
});
$("#calc").on("click", function() {
var sum = 0;
$(".depFinalFactor").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
mySum = sum.toFixed(2);
if (mySum == $("#moneyAccountedFor").val()) {
$("#totalToDeposit").css("color", "green");
} else {
$("#totalToDeposit").css("color", "red");
}
$("#depFinalTotal").val(mySum);
$("#totalToDeposit").text(mySum);
});
$(".manFinalFactor").keyup(function() {
var sum = 0;
$(".manFinalFactor").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
mySum = sum.toFixed(2);
$("#manFinalTotal").val(mySum);
});
$(".safeFinalFactor").keyup(function() {
var sum = 0;
$(".safeFinalFactor").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
mySum = sum.toFixed(2);
$("#safeFinalTotal").val(mySum);
});
});
function calculateSum(myClass, myID) {
var sum = 0;
//iterate through each textboxes and add the values
$(myClass).each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
myTotal = sum.toFixed(2);
$(myID).text(myTotal);
}
function calculateSumForInput(myClass, myID) {
var sum = 0;
//iterate through each textboxes and add the values
$(myClass).each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
myTotal = sum.toFixed(2);
$(myID).val(myTotal);
}
這裏是一個小提琴，如果有人想玩：http://jsfiddle.net/Mt9NX/ – stormdrain 2013-04-11 15:56:34