[英]How to make a row in a table with the sum of all the numbers in a column? Javascript beginner
[英]SUM All ROW of Table Column [HTML, JavaScript]
所以我有這段代碼來生成發票:
.table-data_2{ padding: 0; margin: 0 auto 1.5em auto; border-top: 0px solid #C1DAD7; border-left: 0px solid #C1DAD7; border-collapse:collapse; font-size:12px; font-family: verdana,arial,sans-serif; color:#545454; border: 0; } .td-data_1 { font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; padding: 3px 6px 3px 6px; color: #4f6b72; border: 2; text-align: left; }
<table class="table-data_2" id="tbl_po"> <tr> <td bgcolor="#8eb4e3" class="td-data_1" width=30><font size="2dp"><div align="center">NO </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=80><font size="2dp"><div align="center"> Q-Code </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=450><font size="2dp"><div align="center"> Name, Spec, Size </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=50><font size="2dp"><div align="right"> QTY </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=50><font size="2dp"><div align="center"> Unit </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=50><font size="2dp"><div align="center"> Currency </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=80><font size="2dp"><div align="right"> Unit Price </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=80><font size="2dp"><div align="right"> Total Price </div></font></td> </tr> <tr> <td align="center"><font size="2dp"> 1 </font></td> <td align="left"><font size="2dp"> Data Not Shown </font></td> <td align="center"><font size="2dp"> Data Not Shown </font></td> <td align="right"><font size="2dp"> 2 </font></td> <td align="center"><font size="2dp"> Data Not Shown </font></td> <td align="center"><font size="2dp"> Data Not Shown </font></td> <td align="right"><font size="2dp"> 12000 </font></td> <td align="right" class="total_price"><font size="2dp"> 24000 </font></td> </tr> <tr> <td align="center"><font size="2dp"> 1 </font></td> <td align="left"><font size="2dp"> Data Not Shown </font></td> <td align="center"><font size="2dp"> Data Not Shown </font></td> <td align="right"><font size="2dp"> 2 </font></td> <td align="center"><font size="2dp"> Data Not Shown </font></td> <td align="center"><font size="2dp"> Data Not Shown </font></td> <td align="right"><font size="2dp"> 14000 </font></td> <td align="right" class="total_price"><font size="2dp"> 28000 </font></td> </tr> <tr> <td colspan='7' class='text-right'>Sub total</td> <td class="sub_total">SUM TOTAL PRICE</td> </tr> <tr> <td colspan='7' class='text-right'>VAT</td> <td class='text-right'>10%</td> </tr> <tr> <td colspan='7' class='text-right'><b>TOTAL</b></td> <td class='text-right'><b>TOTAL + VAT</b></td> </tr> </table>
我想生成我的表中顯示的總價的小計(不是從mysql數據庫),以及如何從小計+增值稅中生成值?
任何幫助都感激不盡。
謝謝,
那會是
$(document).ready(function () {
var sumSubTotal = 0;
$('.total_price').each(function() {
sumSubTotal += parseInt($(this).text().trim(), 10) || 0;
});
$( "td:contains('SUM TOTAL')" ).text(sumSubTotal);
$( "td:contains('10%')" ).text(sumSubTotal*0.1);
$( "td:contains('TOTAL + VAT')" ).text((sumSubTotal*0.1)+sumSubTotal);
});
例
嘗試這個:
$('document').ready(function() { var ttl = 0; $.each($('td.total_price'), function(key, value) { ttl += parseInt($(value).text()) || 0; }); var vat = 10; var cVat = (ttl * vat) / 100; $('td.sub_total').html('<strong>' + ttl + '</strong>'); $('td.vat').html('<strong>' + cVat + '</strong>'); $('td.total').html('<strong>' + (ttl + cVat) + '</strong>'); });
.table-data_2{ padding: 0; margin: 0 auto 1.5em auto; border-top: 0px solid #C1DAD7; border-left: 0px solid #C1DAD7; border-collapse:collapse; font-size:12px; font-family: verdana,arial,sans-serif; color:#545454; border: 0; } .td-data_1 { font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; padding: 3px 6px 3px 6px; color: #4f6b72; border: 2; text-align: left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table-data_2" id="tbl_po"> <tr> <td bgcolor="#8eb4e3" class="td-data_1" width=30><font size="2dp"><div align="center">NO </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=80><font size="2dp"><div align="center"> Q-Code </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=450><font size="2dp"><div align="center"> Name, Spec, Size </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=50><font size="2dp"><div align="right"> QTY </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=50><font size="2dp"><div align="center"> Unit </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=50><font size="2dp"><div align="center"> Currency </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=80><font size="2dp"><div align="right"> Unit Price </div></font></td> <td bgcolor="#8eb4e3" class="td-data_1" width=80><font size="2dp"><div align="right"> Total Price </div></font></td> </tr> <tr> <td align="center"><font size="2dp"> 1 </font></td> <td align="left"><font size="2dp"> Data Not Shown </font></td> <td align="center"><font size="2dp"> Data Not Shown </font></td> <td align="right"><font size="2dp"> 2 </font></td> <td align="center"><font size="2dp"> Data Not Shown </font></td> <td align="center"><font size="2dp"> Data Not Shown </font></td> <td align="right"><font size="2dp"> 12000 </font></td> <td align="right" class="total_price"><font size="2dp"> 24000 </font></td> </tr> <tr> <td align="center"><font size="2dp"> 1 </font></td> <td align="left"><font size="2dp"> Data Not Shown </font></td> <td align="center"><font size="2dp"> Data Not Shown </font></td> <td align="right"><font size="2dp"> 2 </font></td> <td align="center"><font size="2dp"> Data Not Shown </font></td> <td align="center"><font size="2dp"> Data Not Shown </font></td> <td align="right"><font size="2dp"> 14000 </font></td> <td align="right" class="total_price"><font size="2dp"> 28000 </font></td> </tr> <tr> <td colspan='7' class='text-right'>Sub total</td> <td class="sub_total">SUM TOTAL PRICE</td> </tr> <tr> <td colspan='7' class='text-right'>VAT</td> <td class='text-right vat'>10%</td> </tr> <tr> <td colspan='7' class='text-right'><b>TOTAL</b></td> <td class='text-right total'><b>TOTAL + VAT</b></td> </tr> </table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.