我用JSON数据创建了一个HTML表，并用java脚本将该JSON格式化为所需的HTML表。
我陷入困境的地方是我想右对齐来自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
最佳答案
尝试使用bootstap类文本向右或文本中心到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>关于javascript - 如何使用javascript左右对齐HTML数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53001918/