How to sum of table amount in javascript?-CodePudding

I have a table where I'm giving few amounts now I want to total of all amounts in table how can i do this?

My Code:-

   var tr = "";
        var totalAmount = "";
        var footerTr = "";
        for(var i=1; i<=31; i  ){
            tr  = `<tr>
                <td>${i}</td>
                <td>${i*2}</td>
                </tr>`

                totalAmount  = `${i*2} `
            }
            footerTr = `<tr>
                <th>Total</th>
                <th>${totalAmount}</th>
                </tr>`

            $('#saving_calc tbody').append(tr);
            $('#saving_calc tfoot').append(footerTr);

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
 <table id="saving_calc" >
        <thead>
            <th>Date</th>
            <th>Amount</th>
        </thead>
      <tbody>
      </tbody>
      <tfoot>
      </tfoot>
    </table>

Thanks for your efforts!

CodePudding user response：

Like this:

        var tr = "";
        var totalAmount = "";
        var total = 0;  //this your total
        var footerTr = "";
        for(var i=1; i<=31; i  ){
            tr  = `<tr>
                    <td>${i}</td>
                    <td>${i*2}</td>
                   </tr>`;

                totalAmount  = `${i*2} `;
                total  = i*2;  //this your total
         }
         totalAmount = totalAmount.substring(0, totalAmount.length - 1); // remove last plus
         totalAmount  = '=' total;
         footerTr = `<tr>
                       <th>Total</th>
                       <th>${totalAmount}</th>
                     </tr>`;

         $('#saving_calc tbody').append(tr);
         $('#saving_calc tfoot').append(footerTr);
         console.log(total);//this your total

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
 <table id="saving_calc" >
        <thead>
            <th>Date</th>
            <th>Amount</th>
        </thead>
      <tbody>
      </tbody>
      <tfoot>
      </tfoot>
    </table>