我已经用JSON数据制作了一个HTML表，并按照我需要的HTML表的格式在Java脚本中对该JSON进行了格式化。
我卡住的地方是我想将来自JSON数据的所有金额正确对齐。 我只想对齐所有数字，但不能做到这一点
这是我的带有json的JavaScript代码
var data = [
{
"amount": 476426,
"billdate": "2018-09-01",
"outlet": "JAYANAGAR"
},
{
"amount": 92141,
"billdate": "2018-09-01",
"outlet": "MALLESHWARAM"
},
{
"amount": 115313,
"billdate": "2018-09-01",
"outlet": "KOLAR"
},
{
"amount": 511153,
"billdate": "2018-09-02",
"outlet": "JAYANAGAR"
},
{
"amount": 115704,
"billdate": "2018-09-02",
"outlet": "MALLESHWARAM"
},
{
"amount": 83597,
"billdate": "2018-09-02",
"outlet": "KOLAR"
},
{
"amount": 167421,
"billdate": "2018-09-03",
"outlet": "JAYANAGAR"
},
{
"amount": 53775,
"billdate": "2018-09-03",
"outlet": "KOLAR"
},
{
"amount": 269711,
"billdate": "2018-09-04",
"outlet": "JAYANAGAR"
},
{
"amount": 58849,
"billdate": "2018-09-04",
"outlet": "MALLESHWARAM"
},
{
"amount": 82998,
"billdate": "2018-09-04",
"outlet": "KOLAR"
},
{
"amount": 335833,
"billdate": "2018-09-05",
"outlet": "JAYANAGAR"
},
{
"amount": 66177,
"billdate": "2018-09-05",
"outlet": "MALLESHWARAM"
},
{
"amount": 85396,
"billdate": "2018-09-05",
"outlet": "KOLAR"
},
{
"amount": 259445,
"billdate": "2018-09-06",
"outlet": "JAYANAGAR"
},
{
"amount": 61144,
"billdate": "2018-09-06",
"outlet": "MALLESHWARAM"
},
{
"amount": 61782,
"billdate": "2018-09-06",
"outlet": "KOLAR"
},
{
"amount": 294481,
"billdate": "2018-09-07",
"outlet": "JAYANAGAR"
},
{
"amount": 61872,
"billdate": "2018-09-07",
"outlet": "MALLESHWARAM"
},
{
"amount": 66403,
"billdate": "2018-09-07",
"outlet": "KOLAR"
},
{
"amount": 451206,
"billdate": "2018-09-08",
"outlet": "JAYANAGAR"
},
{
"amount": 111289,
"billdate": "2018-09-08",
"outlet": "MALLESHWARAM"
},
{
"amount": 96784,
"billdate": "2018-09-08",
"outlet": "KOLAR"
},
{
"amount": 578767,
"billdate": "2018-09-09",
"outlet": "JAYANAGAR"
},
{
"amount": 124466,
"billdate": "2018-09-09",
"outlet": "MALLESHWARAM"
},
{
"amount": 97088,
"billdate": "2018-09-09",
"outlet": "KOLAR"
},
{
"amount": 181344,
"billdate": "2018-09-10",
"outlet": "JAYANAGAR"
},
{
"amount": 27940,
"billdate": "2018-09-10",
"outlet": "KOLAR"
}
];
let formatData = function (data) {
let billdates = [];
let outlets = [];
data.forEach(element => {
if (billdates.indexOf(element.billdate) == -1) {
billdates.push(element.billdate);
}
if (outlets.indexOf(element.outlet) == -1) {
outlets.push(element.outlet);
}
});
return {
data: data,
billdates: billdates,
outlets: outlets
};
};
let renderTable = function (data) {
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("tbl");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Bill_Date";
headerRow.appendChild(th);
let grandTotal = 0;
let outletWiseTotal = {};
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = element;
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.amount);
}
});
grandTotal += outletWiseTotal[element];
});
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = outletWiseTotal[element];
headerRow.appendChild(th);
});
th = document.createElement("th");
th.innerHTML = grandTotal;
headerRow.appendChild(th);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element => {
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
outlets.forEach(outlet => {
let el = 0;
data.forEach(d => {
if (d.billdate == element && d.outlet == outlet) {
total += parseInt(d.amount);
el = d.amount;
}
});
td = document.createElement("td");
td.innerHTML = el;
row.appendChild(td);
});
td = document.createElement("td");
td.innerHTML = total;
row.appendChild(td);
tbody.appendChild(row);
});
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-bordered");
};
let formatedData = formatData(data);
renderTable(formatedData);
我不知道该如何做到这一点，最后我要总计一个，以便它可以加粗。
除日期外，我希望所有数字都正确对齐here is my fiddle
答案 0 :(得分：0)
尝试使用自举程序类文本或文本中心到 th 和 td
var data = [
{
"amount": 476426,
"billdate": "2018-09-01",
"outlet": "JAYANAGAR"
},
{
"amount": 92141,
"billdate": "2018-09-01",
"outlet": "MALLESHWARAM"
},
{
"amount": 115313,
"billdate": "2018-09-01",
"outlet": "KOLAR"
},
{
"amount": 511153,
"billdate": "2018-09-02",
"outlet": "JAYANAGAR"
},
{
"amount": 115704,
"billdate": "2018-09-02",
"outlet": "MALLESHWARAM"
},
{
"amount": 83597,
"billdate": "2018-09-02",
"outlet": "KOLAR"
},
{
"amount": 167421,
"billdate": "2018-09-03",
"outlet": "JAYANAGAR"
},
{
"amount": 53775,
"billdate": "2018-09-03",
"outlet": "KOLAR"
},
{
"amount": 269711,
"billdate": "2018-09-04",
"outlet": "JAYANAGAR"
},
{
"amount": 58849,
"billdate": "2018-09-04",
"outlet": "MALLESHWARAM"
},
{
"amount": 82998,
"billdate": "2018-09-04",
"outlet": "KOLAR"
},
{
"amount": 335833,
"billdate": "2018-09-05",
"outlet": "JAYANAGAR"
},
{
"amount": 66177,
"billdate": "2018-09-05",
"outlet": "MALLESHWARAM"
},
{
"amount": 85396,
"billdate": "2018-09-05",
"outlet": "KOLAR"
},
{
"amount": 259445,
"billdate": "2018-09-06",
"outlet": "JAYANAGAR"
},
{
"amount": 61144,
"billdate": "2018-09-06",
"outlet": "MALLESHWARAM"
},
{
"amount": 61782,
"billdate": "2018-09-06",
"outlet": "KOLAR"
},
{
"amount": 294481,
"billdate": "2018-09-07",
"outlet": "JAYANAGAR"
},
{
"amount": 61872,
"billdate": "2018-09-07",
"outlet": "MALLESHWARAM"
},
{
"amount": 66403,
"billdate": "2018-09-07",
"outlet": "KOLAR"
},
{
"amount": 451206,
"billdate": "2018-09-08",
"outlet": "JAYANAGAR"
},
{
"amount": 111289,
"billdate": "2018-09-08",
"outlet": "MALLESHWARAM"
},
{
"amount": 96784,
"billdate": "2018-09-08",
"outlet": "KOLAR"
},
{
"amount": 578767,
"billdate": "2018-09-09",
"outlet": "JAYANAGAR"
},
{
"amount": 124466,
"billdate": "2018-09-09",
"outlet": "MALLESHWARAM"
},
{
"amount": 97088,
"billdate": "2018-09-09",
"outlet": "KOLAR"
},
{
"amount": 181344,
"billdate": "2018-09-10",
"outlet": "JAYANAGAR"
},
{
"amount": 27940,
"billdate": "2018-09-10",
"outlet": "KOLAR"
}
];
let formatData = function (data) {
let billdates = [];
let outlets = [];
data.forEach(element => {
if (billdates.indexOf(element.billdate) == -1) {
billdates.push(element.billdate);
}
if (outlets.indexOf(element.outlet) == -1) {
outlets.push(element.outlet);
}
});
return {
data: data,
billdates: billdates,
outlets: outlets
};
};
let renderTable = function (data) {
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("tbl");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.classList.add("text-center");
th.innerHTML = "Bill_Date";
headerRow.appendChild(th);
let grandTotal = 0;
let outletWiseTotal = {};
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = element;
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.amount);
}
});
grandTotal += outletWiseTotal[element];
});
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.classList.add("text-center");
th.innerHTML = "Total";
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.classList.add("text-center");
th.innerHTML = outletWiseTotal[element];
headerRow.appendChild(th);
});
th = document.createElement("th");
th.classList.add("text-center");
th.innerHTML = grandTotal;
headerRow.appendChild(th);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element => {
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
outlets.forEach(outlet => {
let el = 0;
data.forEach(d => {
if (d.billdate == element && d.outlet == outlet) {
total += parseInt(d.amount);
el = d.amount;
}
});
td = document.createElement("td");
td.classList.add("text-right");
td.innerHTML = el;
row.appendChild(td);
});
td = document.createElement("td");
td.classList.add("text-right");
td.innerHTML = total;
row.appendChild(td);
tbody.appendChild(row);
});
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-bordered");
table.classList.add("text-center");
};
let formatedData = formatData(data);
renderTable(formatedData);<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div id="tbl"></div>