jQuery对表行的值求和

时间:2019-03-20 19:35:59

标签: javascript jquery html

你好,我有这张桌子 enter image description here

我想获取总数列中每一行的总数   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>

我打算通过php计算总数,但是我可以更容易
使用jQuery只是将每行的总和放在末尾   非常感谢

4 个答案:

答案 0 :(得分:1)

尝试这样的事情。

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

注意:如果您有td,请将“ th”更改为“ td”。看着您的jquery,好像您要附加它。

答案 1 :(得分:1)

在循环之前创建变量。添加到循环中的变量,然后在末尾分配总和。

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

答案 2 :(得分:1)

使用 vc.onDidLoad = nil. // There is no error here. Array.map的销售线索行示例。使用Array.reduce获取jQuery元素。

td

答案 3 :(得分:0)

如果愿意,可以使用我的书面代码进行投票...

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