hello i have this table

i want to get the total of each row in the total column jQuery

  //Monthly Marketing Cost Report

         $.get('/dashboard/costs', function(data){
            $.each(data,function(i,value){
                var leads = $('#leads');
                var budget_total_year = $('#full_year_cost');
                var budget_total_month = $('#share_cost');
                var budget_per_lead = $('#cost_per_lead');

                leads.append('<th>' + value.olxTotal + '</th>');
                budget_total_year.append('<th>' + value.budget_total_year + '</th>');
                budget_total_month.append('<th>' + value.budget_total_month + '</th>');
                budget_per_lead.append('<th>' + value.budget_per_lead + '</th>');
            })

        })

HTML

  <tbody id="tableData-marketMonth">
                                        <tr id="leads">
                                            <th>Leads</th>
                                         </tr>
                                         <tr id="full_year_cost">
                                             <th>Full Year Cost</th>
                                         </tr>
                                         <tr id="share_cost">
                                             <th>{{date('F')}} Share of Cost</th>
                                         </tr>
                                         <tr id="cost_per_lead">
                                             <th>Cost per Lead</th>
                                         </tr>
                                    </tbody>

i was going to calculate the total through php but i though it can be easier
using jQuery just putting the sum of each row at the end Thank you very much

hello i have this table

i want to get the total of each row in the total column jQuery

  //Monthly Marketing Cost Report

         $.get('/dashboard/costs', function(data){
            $.each(data,function(i,value){
                var leads = $('#leads');
                var budget_total_year = $('#full_year_cost');
                var budget_total_month = $('#share_cost');
                var budget_per_lead = $('#cost_per_lead');

                leads.append('<th>' + value.olxTotal + '</th>');
                budget_total_year.append('<th>' + value.budget_total_year + '</th>');
                budget_total_month.append('<th>' + value.budget_total_month + '</th>');
                budget_per_lead.append('<th>' + value.budget_per_lead + '</th>');
            })

        })

HTML

  <tbody id="tableData-marketMonth">
                                        <tr id="leads">
                                            <th>Leads</th>
                                         </tr>
                                         <tr id="full_year_cost">
                                             <th>Full Year Cost</th>
                                         </tr>
                                         <tr id="share_cost">
                                             <th>{{date('F')}} Share of Cost</th>
                                         </tr>
                                         <tr id="cost_per_lead">
                                             <th>Cost per Lead</th>
                                         </tr>
                                    </tbody>

i was going to calculate the total through php but i though it can be easier
using jQuery just putting the sum of each row at the end Thank you very much

• javascript
• jquery
• html

• Unless you want to change the numbers and calculate live on client-side doing the calculation on php is much easy and simple. If you have a database table... even better to get the sum with query. – Nawed Khan Commented Mar 20, 2019 at 19:41
• i want to calculate it on client side but i need help i can't figure it out – mohamed adel Commented Mar 20, 2019 at 19:42

4 Answers 4

Create variables before the loop. add to the variables in the loop and then assign the sum at the end.

 $.get('/dashboard/costs', function(data){

            var sumLeads = 0;
            var sumFullYearCost = 0;
            var sumShareCost = 0;
            var sumCostPerLead = 0;

            var tr_leads = $('#leads');
            var tr_budget_total_year = $('#full_year_cost');
            var tr_budget_total_month = $('#share_cost');
            var tr_budget_per_lead = $('#cost_per_lead');

            $.each(data,function(i,value){


                tr_leads.append('<th>' + value.olxTotal + '</th>');
                tr_budget_total_year.append('<th>' + value.budget_total_year + '</th>');
                tr_budget_total_month.append('<th>' + value.budget_total_month + '</th>');
                tr_budget_per_lead.append('<th>' + value.budget_per_lead + '</th>');

                sumLeads += value.olxTotal;
                sumFullYearCost += value.budget_total_year;
                sumShareCost += value.budget_total_month;
                sumCostPerLead += value.budget_per_lead;
            });


            tr_leads.append('<th>' + sumLeads  + '</th>');
            tr_budget_total_year.append('<th>' + sumFullYearCost  + '</th>');
            tr_budget_total_month.append('<th>' + sumShareCost  + '</th>');
            tr_budget_per_lead.append('<th>' + sumCostPerLead  + '</th>');    
   });

Example for leads row using Array.map and Array.reduce. Use jQuery to get the td elements.

var leads = $('#leads');
const total = leads.children('td').toArray().map(x=>Number(x.innerHTML)).reduce((sum, x) => sum + x)
leads.append(`<th>${total}</th>`);

Try something like this.

$('#tableData-marketMonth tr').each(function () {
    var row = $(this);
    var rowTotal = 0;
    $(this).find('th').each(function () {
        var th = $(this);
        if ($.isNumeric(th.text())) {
            rowTotal += parseFloat(th.text());
        }
    });
    row.find('th:last').text(rowTotal);
});

NOTE: change 'th' to 'td' if you have td's. Looking at your jquery, it looks like you are appending th's.

You can use my written code to vote if you like it...

HTML

<table>
    <thead>
        <tr>
            <th>MAX ATK</th>
            <th>MAX DEF</th>
            <th>MAX HP</th>
            <th>Overall</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="bat">8170</td>
            <td class="bat">6504</td>
            <td class="bat">6050</td>
            <td class="total-bat"></td>
        </tr>
        <tr>
            <td class="bat">8500</td>
            <td class="bat">10200</td>
            <td class="bat">7650</td>
            <td class="total-bat"></td>
        </tr>
        <tr>
            <td class="bat">9185</td>
            <td class="bat">7515</td>
            <td class="bat">9185</td>
            <td class="total-bat"></td>
        </tr>
    </tbody>
</table>

jquery

$(document).ready(function () {
    //iterate through each row in the table
    $('tr').each(function () {
        //the value of sum needs to be reset for each row, so it has to be set inside the row loop
        var sum = 0
        //find the bat elements in the current row and sum it 
        $(this).find('.bat').each(function () {
            var bat = $(this).text();
            if (!isNaN(bat) && bat.length !== 0) {
                sum += parseFloat(bat);
            }
        });
        //set the value of currents rows sum to the total-bat element in the current row
        $('.total-bat', this).html(sum);
    });
});