CODEWITHSUNDEEP
javascriptjqueryhtml
M Ansyori
M Ansyori

Reputation: 488

SUM All ROW of Table Column [HTML, JavaScript]

So I have this code to generate an invoice :

.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>

I want to generate sub total of total price that shown in my table (not from mysql database), and also how to generate value from sub total + vat?

Any help will be much appreciated.

Thanks,

Upvotes: 0

Views: 101

Answers (2)

rob.Steel
rob.Steel

Reputation: 61

That would be 

$(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);

});

Example

https://jsfiddle.net/zzzrdcr5/1/

Upvotes: 2

Fadhly Permata
Fadhly Permata

Reputation: 1686

Try this:

$('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>

Upvotes: 1

Related Questions