How To Sum All Table Rows td (TotalPrice) using td id Jquery

Question

I am adding values to table like: Item,Quantity,Price,TotalPrice

Now there are multiple rows: How can i sum TotalPrice of all to get GrandTotal using Jquery.

Code:

$("#Product").append(" <tr><td id='clientname'>" +ClientName+ "</td> <td id='item'>"+ItemName+"</td> <td id='quantity'>"+Quantity+"</td> <td id='price'>"+Price+"</td> <td id='totalprice'>"+TotalPrice+"</td> <td> <a  onClick='deleteRow(this);'>Delete</a> </td> </tr>");

Its possible when i insert new row data its show grand total in textbox/label,Like:

 function TotalPriceCalc()
 {
 var lblTotalPrice = document.getElementById('lblTotalPrice');
 lblTotalPrice.value = sum; 
 }

Answer 1

Here's an example that will sum whatever column index you provide.

$(function() {
  $("#subtotal").html(sumColumn(4));
  $("#total").html(sumColumn(5));
});

function sumColumn(index) {
  var total = 0;
  $("td:nth-child(" + index + ")").each(function() {
    total += parseInt($(this).text(), 10) || 0;
  });  
  return total;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="border-spacing: 10px;">
  <tr>
    <td>ClientName</td>
    <td>ItemName</td>
    <td>Quantity</td>
    <td>12</td>
    <td>34</td>
  </tr>
  <tr>
    <td>ClientName</td>
    <td>ItemName</td>
    <td>Quantity</td>
    <td>56</td>
    <td>78</td>
  </tr>
  <tr>
    <td>ClientName</td>
    <td>ItemName</td>
    <td>Quantity</td>
    <td>90</td>
    <td>12</td>
  </tr>
  <tr>
    <td colspan="3">Totals</td>
    <td id="subtotal"></td>
    <td id="total"></td>
  </tr>
</table>

Answer 2

After you use class= instead of id= .Cause ID MUST be unique. you need to loop through each row and find totalPrice

$(document).ready(function(){
    var TotalValue = 0;
    $("#Product tr").each(function(){
          TotalValue += parseFloat($(this).find('.totalprice').text());
    });
    alert(TotalValue);
});

While you tagged Jquery .. This is a Jquery solution so please be sure to include Jquery

Answer 3

You should use classes, not IDs, to name repeated elements. So it should be:

...<td class="totalprice">'+TotalPrice+'</td>...

Then you can do

function TotalPriceCalc() {
    var total = 0;
    $(".totalprice").each(function() {
        total += parseFloat($(this).text());
    });
    $("#lblTotalPrice").val(total);
}

Answer 4

Have look, this is our table

<table class="table table-bordered">
    <thead>
        <tr>
            <th>1</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td id="loop">50</td>
        </tr>
        <tr>
            <td>1</td>
            <td id="loop">60</td>
        </tr>
        <tr>
            <td>1</td>
            <td id="loop">70</td>
        </tr>
    </tbody>
    <tbody>
      <tr>
         <td class="text-right">Total</td>
        <td></td>
     </tr>
  </tbody>

And this is loop to have sum of price

          $(function() {
        
            var TotalValue = 0;

            $("tr #loop").each(function(index,value){
                currentRow = parseFloat($(this).text());
                TotalValue += currentRow
            });
            
            console.log(TotalValue);

        });