[英]Want to create JSON format for a HTML Table
I want to create a HTML table.我想创建一个 HTML 表格。 But I am not able to figure that how my JSON should be like what format and what key value pair it should have.
但是我无法弄清楚我的 JSON 应该是什么样的格式以及它应该具有什么样的键值对。
This is the table I want.
这是我想要的桌子。 Please anyone out there help me out with the JSON and jQuery/Javascript code corresponding to this HTML table.
请任何人帮助我解决与此 HTML 表相对应的 JSON 和 jQuery/Javascript 代码。 I am stuck here for a while now.
我现在被困在这里一段时间了。
this is the JSON I have made earlier:这是我之前制作的 JSON:
[
{
"Billdate": "01-08-18",
"Total": "90",
"Ol1-total": "20",
"c1": "2",
"c2": "4",
"c3": "6",
"c4": "8",
"Ol2-total": "36",
"c12": "10",
"c22": "12",
"c32": "14",
"Ol3-total": "34",
"c2": "16",
"c3": "18"
},
{
"Billdate": "02-08-18",
"Total": "150",
"Ol1-total": "66",
"c1": "20",
"c2": "22",
"c3": "0",
"c4": "24",
"Ol2-total": "54",
"c2": "26",
"c3": "28",
"c4": "0",
"Ol3-total": "30",
"c2": "22",
"c3": "30"
}]
But it says duplicate key.但它说重复键。
So I have changed my HTML style now I am not able to think about the JSON format and even the javascript to render table.所以我改变了我的 HTML 样式,现在我无法考虑 JSON 格式,甚至无法使用 javascript 来呈现表格。
I was using this code:我正在使用此代码:
function addTable() {
var col = Object.keys(tableValue[0]); // get all the keys from first object
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
// shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableValue[i][col[j]];
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
addTable()
But it works only for single loop, not nested and all.但它仅适用于单个循环,不适用于嵌套和所有循环。
I would calculate the column totals separately and not have them as part of the dataset:我会单独计算列总数,而不是将它们作为数据集的一部分:
const data = [ // a rows comprises a date, a three arrays of column data { date: '01/02/2018', ol1: [10, 20, 25], ol2: [15, 30], ol3: [35] }, { date: '02/02/2018', ol1: [5, 0, 15], ol2: [10, 0], ol3: [20] } ]; // calculates the sum of an array of integers const sum = (arr) => arr.reduce((n, c) => n + c, 0); // group cells of a type const group = (arr) => arr.map(el => `<td>${el}</td>`).join(''); // `map` over each row object in the dataset const rows = data.map(row => { // calculate the totals up-front const ol1total = sum(row.ol1); const ol2total = sum(row.ol2); const ol3total = sum(row.ol3); const alltotal = sum([ol1total, ol2total, ol3total]); // then return a string of HTML for each row return ` <tr> <td>${row.date}</td> <td>${alltotal}</td> <td>${ol1total}</td> ${group(row.ol1)} <td>${ol2total}</td> ${group(row.ol2)} <td>${ol3total}</td> ${group(row.ol3)} </tr>` }); // create some heading HTML const headings = ['date', 'counter', 'total', 'c1', 'c2', 'c3', 'total', 'c1', 'c2', 'total', 'c1']; const headingsHTML = `<td>${headings.join('</td><td>')}</td>`; // add it to the DOM document.body.insertAdjacentHTML('beforeend', ` <table> <thead>${headingsHTML}</thead> <tbody>${rows.join('')}</tbody> </table> `);
table { border-collapse: collapse; } thead { font-weight: bold; background-color: #efefef;} td { border: 1px solid #bcbcbc; padding: 3px; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.