【发布时间】：2019-07-20 19:05:32
【问题描述】：
我有一个 HTML 表格，我在 JSON 数据的帮助下制作，我只在 javascript 的帮助下创建我的表格，我的表格是动态的
我有一个 json 数组，里面有几个包含数据的对象。
我正在尝试从这个 JSON 中制作一个 HTML 表格
- 我已成功创建标题，但在创建正文部分时遇到问题
-
我正在尝试创建这种表：
平均值就像所有取消账单的总和除以网点数量，这就是我计算网点长度并将其存储在全局变量中的原因
- 由于我的代码有点长，我已经评论了我正在做什么以及在哪里面临什么问题的所有行
- 在正文部分，我不知道如何填充与出口相关的已取消账单数据，对于重复账单也是如此
这是我到目前为止所做的：
var outletCount = 0; //global variable to get the no of outlets
var data = [{
"outlet": "JAYANAGAR",
"cancelled": 126544,
"duplicate": 1
},
{
"outlet": "MALLESHWARAM",
"cancelled": 31826,
"duplicate": 31
},
{
"outlet": "KOLAR",
"cancelled": 10374,
"duplicate": 10
}
];
let formatData = function(data) { //outlets is unique thats why formating it to loop forward in my code
let outlets = [];
data.forEach(element => {
if (outlets.indexOf(element.outlet) == -1) {
outlets.push(element.outlet);
}
});
outletCount = outlets.length //calculating outlet count
return {
data: data,
outlets: outlets,
};
};
let renderTable = function(data) {
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("tblOlSalesSummary");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Bill Type"; //header
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Average"; //header
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = element; //this one is populating outlet as header
th.classList.add("text-center");
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody"); // from here onwards i don't know what to do
let row = document.createElement("tr");
let total = 0;
outlets.forEach(outlet => { //i am trying to loop through outlets but getting somthing else
let el = 0;
data.forEach(d => {
if (d.outlet == outlet) {
total += parseInt(d.cancelled);
el = d.cancelled;
}
});
td = document.createElement("td");
td.innerHTML = el.toLocaleString('en-in');
td.classList.add("text-right");
row.appendChild(td);
});
/* console.log("row is : " , row.children ) */
tbody.appendChild(row);
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div align="center" class="table table-responsive">
<table id="tblOlSalesSummary"></table>
</div>我不明白要循环我的已取消账单和针对网点的重复账单，然后计算平均值。
【问题讨论】：
-
你的表格布局是只有这个还是动态的？因为如果您想重用它，那么使用外部库或格式化您的 json 响应以更适合表格格式可能是有意义的
标签： javascript json html-table