javascript - 获取列的总数

Question

我创建了带有 json 响应的表。我想得到列的总和

const pipeline= [{Geo: "APAC", SalesStage: "Proposal Submitted", count: 11, pipelinevalue: 1},
   {Geo: "NSU", SalesStage: "Proposal Submitted", count: 4, pipelinevalue: 2},
   {Geo: "Middle East", SalesStage: "Proposal Submitted", count: 17, pipelinevalue: 1},
   {Geo: "US East", SalesStage: "Proposal Submitted", count: 14, pipelinevalue: 1},
   {Geo: "Europe", SalesStage: "Proposal Submitted", count: 9, pipelinevalue: 2},
   {Geo: "US West", SalesStage: "Proposal Submitted", count: 6, pipelinevalue: 1}];
   genetateTable(pipeline,'#geo_summary thead','#geo_summary tbody',pipeval='1');
 function genetateTable(pipeline,divHeader,divBody,pipeval){
                            $.each(pipeline, function (index, item) {
                                
    const $tr = $('<tr>');
    if(pipeval=='1'){
  
  $tr.append([item.SalesStage, item.count,item.pipelinevalue].map(x => $('<td>').text(x)));
    }else{$tr.append([item.SalesStage, item.count].map(x => $('<td>').text(x)));}
  $(divBody).append($tr);
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo_summary"> <thead style="background-color: #00f; color: #fff"> <tr><th style="background-color: #66cdf2; color: #000">Opportunity</th><th style="background-color: #66cdf2; color: #000">Pipeline Count</th><th style="background-color: #66cdf2; color: #000">Pipeline Value</th></tr></thead> <tbody> </tbody><tfooter><tfooter></table>

我想得到 ount 和 pipelinevalue 的总和。

我想追加<tr><td>Total</td><td>61</td><td>8</td></tr>

在 tfooter 中。

标签： javascripthtmljquery

Answer 1

const pipeline = [{
    Geo: "APAC",
    SalesStage: "Proposal Submitted",
    count: 11,
    pipelinevalue: 1
  },
  {
    Geo: "NSU",
    SalesStage: "Proposal Submitted",
    count: 4,
    pipelinevalue: 2
  },
  {
    Geo: "Middle East",
    SalesStage: "Proposal Submitted",
    count: 17,
    pipelinevalue: 1
  },
  {
    Geo: "US East",
    SalesStage: "Proposal Submitted",
    count: 14,
    pipelinevalue: 1
  },
  {
    Geo: "Europe",
    SalesStage: "Proposal Submitted",
    count: 9,
    pipelinevalue: 2
  },
  {
    Geo: "US West",
    SalesStage: "Proposal Submitted",
    count: 6,
    pipelinevalue: 1
  }
];
genetateTable(pipeline, '#geo_summary thead', '#geo_summary tbody', pipeval = '1');

function genetateTable(pipeline, divHeader, divBody, pipeval) {
  let totalCount = 0;
  let totalValue = 0;
  $.each(pipeline, function(index, item) {

    const $tr = $('<tr>');
    totalCount += item.count;
    totalValue += item.pipelinevalue;
    if (pipeval == '1') {

      $tr.append([item.SalesStage, item.count, item.pipelinevalue].map(x => $('<td>').text(x)));
    } else {
      $tr.append([item.SalesStage, item.count].map(x => $('<td>').text(x)));
    }
    $(divBody).append($tr);
  });
  $('#geo_summary').append($(`<tfoot><tr><td>Total</td><td>${totalCount}</td><td>${totalValue}</tr></tfoot>`))
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo_summary">
  <thead style="background-color: #00f; color: #fff">
    <tr>
      <th style="background-color: #66cdf2; color: #000">Opportunity</th>
      <th style="background-color: #66cdf2; color: #000">Pipeline Count</th>
      <th style="background-color: #66cdf2; color: #000">Pipeline Value</th>
    </tr>
  </thead>
  <tbody> </tbody>
  <tfooter>
    <tfooter>
</table>