jquery table rows lines totalals and total total

我目前正在爲計算機維修技術人員編寫一個小插件，現在我正在嘗試對發票部分進行編碼，但沒有多少運氣！jquery table rows lines totalals and total total

我已經從數據庫填充字段，但我試圖使用jquery更新行總數和發票總額。

下面是我想要做的快速圖像！

enter image description here 我試圖讓它更新pageload上的總數，以及當單位成本和數量文本框中的值發生變化時。

$(document).ready(function() { 
    $("#invoiceitems tbody tr").each(function() { 
     $(this).change(function() { 
      updateTotal(); 
     }); 
    }); 
}); 

function updateTotal() { 

    //Calculate Subtotal for each item 
    var quantity = $('.quantity').val(); 
    var price = $('.price').val(); 
    var subtotal = parseInt(quantity) * parseFloat(price); 
    $('.subtotal').text(subtotal); 
    //Calculate Grand Total 
    var sum = 0; 
    $('.linetotal').each(function() { 
     sum += parseFloat($(this).text()); 
    }); 
    $('#grandTotal').html(parseFloat(sum)); 
}

在這裏找到這個代碼，但我真的沒有線索，無法讓它工作！

某些方向/幫助將不勝感激！

非常感謝 Jase

來源

2012-09-07 Jason Mutton

你可以顯示任何html或更好的使用http://www.jsfiddle.net？ – Dom

http://jsfiddle.net/7gaWf/1/我不確定我是否做得正確，第一次使用小提琴！ –

看起來你是一個完全新手jQuery .. !!好開始雖然..不難撿起來..

這裏.price，.quantity和.lineTotal對應於他們正在談論的列的類名稱。 grandTotal是表中的Total的ID ..

我都忍了你正在努力工作到..應該是一個良好的開端的情況下Working Example Updated ..

但不要拿我沒有添加任何條件，注意檢查，如果用戶輸入是否有效...嘗試添加它們，同時推出它。讓我知道如果你在解碼時遇到任何困難。

來源

2012-09-07 21:10:49

哇！我剛剛實現它，它效果很好！還有一件事，我怎樣才能在頁面初始加載時生成總計？ –

只需稍微調整一下你的代碼。將updateTotals（）方法分成兩部分。檢查上面的更新FIDDLE ..我將它們分成了兩個函數。只需在Document.Ready中調用CalculateTotals（）。 –

http://jsfiddle.net/BE8c7/1/這就是我現在所擁有的。似乎無法讓它生成負載上的總計/總數。由於某種原因，當我使用按鈕添加新的文本字段元素時，它似乎工作正常。 –

鑑於這種簡單的HTML爲例：

<table> 
<tr> 
<td> 
<input type="text" name="unitCost[]" id="unitCost_1" value="15.99" class="editable"/> 
</td> 
<td> 
<input type="text" name="quantity[]" id="quantity_1" value="1" class="editable"/> 
</td> 
</tr> 
<tr> 
<td> 
<input type="text" name="unitCost[]" id="unitCost_2" value="2.50" class="editable"/> 
</td> 
<td> 
<input type="text" name="quantity[]" id="quantity_2" value="1" class="editable"/> 
</td> 
</tr> 
</table>

我想你會想改變你的jQuery看起來是這樣的：

$(document).ready(function() { 
    updateTotal(); 

    $(".editable").live("change", function() { 
        updateTotal(); 
    }); 
});

沒有看到您的實際HTML，很難說您是否有什麼問題updateTotal()函數

來源

2012-09-07 20:59:14

jquery table rows lines totalals and total total

回答

相關問題