jQuery sum the values of table rows

Question

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

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, Mar 20 '19 at 19:41
i want to calculate it on client side but i need help i can't figure it out — mohamed adel, Mar 20 '19 at 19:42

NickAndrews · Answer 1 · 2019-03-20T20:21:10.360

1

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.

edited Mar 20 '19 at 20:21

answered Mar 20 '19 at 19:47

NickAndrews

496
2
9

Thank you very much for your answer i tried it but i got this https://ibb.co/gT07yYw – mohamed adel Mar 20 '19 at 19:57
I would need to see your final HTML of that table screenshot, can you post that as well? You could copy the html out of developer tools. – NickAndrews Mar 20 '19 at 20:13

Nawed Khan · Accepted Answer · 2019-03-20T20:13:09.623

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>');    
   });

Thank you very much it works as on the first feild leads i get 56 as total but on the rest i get nothing and i get this error on console budget_total_year is not defined — mohamed adel, Mar 20 '19 at 20:05
I have updated the code by moving the row assignments outside the loop. Also I have changed the row names so we know the error is about the row or your data. — Nawed Khan, Mar 20 '19 at 20:13

score 1 · Answer 3 · answered Mar 20 '19 at 19:58

1

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>`);

answered Mar 20 '19 at 19:58

Dakota Jang

118
1
1
9

Thank you very much for your answer i tried but it didn't work all the table earased and i got the sums on the 1st column and the rest of the table is empty – mohamed adel Mar 20 '19 at 20:09

score 0 · Answer 4 · answered Mar 20 '19 at 19:44

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="combat">8170</td>
            <td class="combat">6504</td>
            <td class="combat">6050</td>
            <td class="total-combat"></td>
        </tr>
        <tr>
            <td class="combat">8500</td>
            <td class="combat">10200</td>
            <td class="combat">7650</td>
            <td class="total-combat"></td>
        </tr>
        <tr>
            <td class="combat">9185</td>
            <td class="combat">7515</td>
            <td class="combat">9185</td>
            <td class="total-combat"></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 combat elements in the current row and sum it 
        $(this).find('.combat').each(function () {
            var combat = $(this).text();
            if (!isNaN(combat) && combat.length !== 0) {
                sum += parseFloat(combat);
            }
        });
        //set the value of currents rows sum to the total-combat element in the current row
        $('.total-combat', this).html(sum);
    });
});

jQuery sum the values of table rows

4 Answers4

Linked