javascript - 获取html表的列总和
问题描述
我创建了一个带有 html 响应的表,并计算了行和其他列的总和。我需要得到管道值的总和。我得到了 Closed Won、Identified、qualified 列的总和。我也想要管道值的总和。现在管道值总计为空。如何获得管道值的总和。
const summary_data = [
{Geo:"US West",SalesStage:"Closed Won",count:2,pipelinevalue:356},
{Geo:"US East",SalesStage:"Closed Won",count:8,pipelinevalue:35},
{Geo:"US West",SalesStage:"Qualified",count:16,pipelinevalue:6},
{Geo:"US East",SalesStage:"Qualified",count:3,pipelinevalue:3},
{Geo:"US East",SalesStage:"Identified",count:50,pipelinevalue:6},
{Geo:"US West",SalesStage:"Identified",count:39,pipelinevalue:3},
{Geo:"NSU",SalesStage:"Identified",count:20,pipelinevalue:8}];
const stages = summary_data.reduce((res, row) => {
//console.log(res);
//console.log(row);
if (!res.includes(row.SalesStage)) res.push(row.SalesStage);
return res;
}, []).concat('Total');
const obj = summary_data.reduce((res, row) => {
if (!res[row.Geo]) {
res[row.Geo] = Object.fromEntries([ ['Geo', row.Geo],['Pipeline Value', row.pipelinevalue], ...stages.map(s => [s, 0]) ]);
}
res[row.Geo][row.SalesStage] += row.count;
if(row.SalesStage=='Proposal Submitted'||row.SalesStage=='Qualified' ||row.SalesStage=='Negotiation & Contracting')
res[row.Geo].Total += row.count;
return res;
}, {}); // { "US West": {}, "US East": {}, ... }
const geodata = Object.values(obj); // [ { "Geo": "US West", "Closed Won": 2, ...}, ...]
const pipelineval = summary_data.reduce((res, row) => { });
// Add a "Total" row
geodata.push({
Geo: 'Total',
PipelineValue:'',
...Object.fromEntries(
stages.map(s => [s, geodata.reduce((sum, row) => row[s] + sum, 0)])
)
});
$('#geo_summary thead').append(
Object.keys(geodata[0]).map(x => $('<td>').text(x))
);
$('#geo_summary tbody').append(
geodata.map(row => $('<tr>').append(
Object.values(row).map(x => $('<td>').text(x))
))
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo_summary"> <thead> </thead> <tbody> </tbody></table><style>table{border-collapse:collapse}td{border:1px solid #000;padding:.5em}</style>
解决方案
我想你刚刚陷入了计算中:解决方案是使用reduce
函数进行简单的加法:
const summary_data = [{
Geo: "US West",
SalesStage: "Closed Won",
count: 2,
pipelinevalue: 356
},
{
Geo: "US East",
SalesStage: "Closed Won",
count: 8,
pipelinevalue: 35
},
{
Geo: "US West",
SalesStage: "Qualified",
count: 16,
pipelinevalue: 6
},
{
Geo: "US East",
SalesStage: "Qualified",
count: 3,
pipelinevalue: 3
},
{
Geo: "US East",
SalesStage: "Identified",
count: 50,
pipelinevalue: 6
},
{
Geo: "US West",
SalesStage: "Identified",
count: 39,
pipelinevalue: 3
},
{
Geo: "NSU",
SalesStage: "Identified",
count: 20,
pipelinevalue: 8
}
];
const stages = summary_data.reduce((res, row) => {
//console.log(res);
//console.log(row);
if (!res.includes(row.SalesStage)) res.push(row.SalesStage);
return res;
}, []).concat('Total');
const obj = summary_data.reduce((res, row) => {
if (!res[row.Geo]) {
res[row.Geo] = Object.fromEntries([
['Geo', row.Geo],
['Pipeline Value', row.pipelinevalue], ...stages.map(s => [s, 0])
]);
}
res[row.Geo][row.SalesStage] += row.count;
if (row.SalesStage == 'Proposal Submitted' || row.SalesStage == 'Qualified' || row.SalesStage == 'Negotiation & Contracting')
res[row.Geo].Total += row.count;
return res;
}, {}); // { "US West": {}, "US East": {}, ... }
const geodata = Object.values(obj); // [ { "Geo": "US West", "Closed Won": 2, ...}, ...]
// simple addition with reduce!
const pipelineval = summary_data.reduce((a, c) => {
a += c.pipelinevalue
return a
}, 0);
// Add a "Total" row
geodata.push({
Geo: 'Total',
PipelineValue: pipelineval,
...Object.fromEntries(
stages.map(s => [s, geodata.reduce((sum, row) => row[s] + sum, 0)])
)
});
$('#geo_summary thead').append(
Object.keys(geodata[0]).map(x => $('<td>').text(x))
);
$('#geo_summary tbody').append(
geodata.map(row => $('<tr>').append(
Object.values(row).map(x => $('<td>').text(x))
))
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo_summary">
<thead> </thead>
<tbody> </tbody>
</table>
<style>
table {
border-collapse: collapse
}
td {
border: 1px solid #000;
padding: .5em
}
</style>
推荐阅读
- quota - xfs_quota - 属性显示默认值并删除与配额相关的元数据
- java - Java Servlet 读取 URL 重定向后的参数
- java - 构建我的 Fabric Mod 时如何修复“未找到名称为 'compile' 的配置”错误
- java - Hibernate 错误:“使用 @OneToMany 或 @ManyToMany 定位未映射的类”和“不是托管类型”
- terraform - Azure terraform 存储帐户权限
- django - 当我运行服务器而不是 localhost:8000 时,我被重定向到 localhost:8000/app/
- mysql - 如何根据其他列值约束 MySQL 中的列值?
- powershell - 将电子邮件标记为已读
- angular - 单元测试用例在单独运行时运行没有任何问题,但在通过在 jasmine karma 中运行 ng test 运行所有文件时失败
- docker - 如何在 travis 构建我的 docker 容器时运行我的 phpunit 测试?