使用JavaScript和JSON创建HTML表

我试图从JSON输入中使用JavaScript创建一个HTML表，但是，它不适合我

我在HTML中使用了一个标记。这将通过Javascript中的

innerHTML

调用填充：

for (var i = 0; i < json.data.length; i++) {
  listItem = json.data[i].number + "--" + "( Widget " + json.data[i].widget_id + ") x " + "  " + json.data[i].pence_price + " GBP" + json.data[i].number * json.data[i].pence_price + " GBP";
  table.push(listItem);
}
document.getElementById('updateOrder').innerHTML = table;

我想要的是：

11--Widget 8 x 10GBP                  110GBP
10--Widget 9 x 10GBP                  100GBP

其中数字、小部件和成本是左对齐的，总数是右对齐的。我还想在单独的行上单独订购

JSON中的数据是：

{"id":"9518","order_id":"11380","widget_id":"9","number":"10","pence_price":"12"}

---

我一直在用这个把我的头发拔出来；任何帮助或指导都将不胜感激。

我创建了一个稍微大一点的模板，它为您提供了一种创建表格、添加一些样式以及进行一些潜在计算的可能方法

我尽力添加尽可能多的注释来描述代码的功能

由于您提到需要一个html表格，所以它是使用基本的

table

元素创建的，并且添加了一些基本样式来区分页眉、行和页脚

//此演示中使用的数据
风险值数据=[{
“id”：“9518”，
“订单id”：“11380”，
“widget_id”：“9”，
“编号”：“10”，
“便士价格”：“12”
},
{
“id”：“9518”，
“订单id”：“11380”，
“widget_id”：“9”，
“编号”：“10”，
“便士价格”：“12”
}
];
函数createTable（目标、数据、列）{
//根据目标div的id获取所需的元素
//并为该表创建表、thead、tbody和tfoot
let element=document.getElementById（目标），
table=document.createElement（'table'），
thead=document.createElement（'thead'），
header=document.createElement（'tr'），
tbody=document.createElement（'tbody'），
tfoot=document.createElement（'tfoot'）；
//创建标题
columns.forEach（column=>{
//并在标题中创建单元格，添加标题和类
让cell=document.createElement（'td'）；
cell.innerHTML=column.title；
cell.className=column.class；
header.appendChild（单元格）；
});
thead.appendChild（标题）；
//总计用于页脚的总计
变量总数={}；
for（设i=0；i{
//并为每列创建单元格本身
让cell=document.createElement（'td'）；
让价值；
//检查要显示的内容
if（column.field）{
//数据上只有一个属性
值=数据[i][column.field]；
}else if（column.value）{
//具有回调值的函数
value=column.value（数据[i]）
}
//如果它应该计算总数，它将在这里这样做
if（计算总计列）{
//如果列未知，则初始化为0
//警告：所有值都将是整数
总计[列.字段]=（总计[列.字段]| | 0）+parseInt（值）；
}
//如果它有模板，我们将用值替换%0
//此模板函数仅支持1个要“模板化”的值
if（column.template）{
value=column.template.split（“%0”）.join（值）；
}
//设置单元格值
cell.innerHTML=值；
//设置类（例如，用于对齐）
cell.className=column.class；
//将单元格添加到行
子行（单元格）；
});
//将行添加到tbody
tbody.appendChild（世界其他地区）；
}
//空对象将意味着false，所以只有在需要计算总数的情况下
//它会在这里创建页脚吗
若有（总计）{
让row=document.createElement（'tr'）；
columns.forEach（column=>{
让cell=document.createElement（'td'），value=''；
if（计算总计列）{
值=总计[列.字段]；
if（column.template）{
//仍然可以使用行模板
value=column.template.split（“%0”）.join（值）；
}
}
cell.innerHTML=值；
cell.className=column.class；
子行（单元格）；
});
tfoot.appendChild（行）；
}
表1.儿童（thead）；
表3.儿童（t身体）；
表3.appendChild（tfoot）；
//在目标元素上设置表
//警告，两次调用create table将在彼此下面创建两个表
元素。子元素（表）；
}
//使用以下命令调用创建表：
//-目标：html中的id->“目标”
//-数据：定义数据本身的数组
//-列：描述表外观的对象数组
//-标题：标题
//-字段（可选）：应显示哪个属性
//-value（可选）：接收行并应返回值的回调函数
//-calculatedValue（可选）：bool指示是否应求和列
//-模板（可选）：您希望添加到数据中的任何文本？
createTable（'目标'，数据[{
标题：“id”，
字段：“id”，
班级：'左'
},
{
标题:"命令",，
字段：“订单id”，
班级：'左'
},
{
标题：“小部件”，
字段：'widget_id'，
班级：'左'
},
{
标题:"数字",，
字段：'编号'，
班级：'中心'
},
{
标题:"价格",，
字段：“便士价格”，
班级：'对'，
模板：“%0 GBP”
},
{
标题：“总计”，
值：（行）=>parseInt（行['number']）*parseInt（行['pence\u price']），
班级：'对'，
模板：“%0 GBP”，
计算总数：对
}
]);
。左{
文本对齐：左对齐；
}
.对{
文本对齐：右对齐；
}
thead tr{
背景色：#777；
}
thead tr td{
字体大小：粗体；
颜色：#fff；
}
tfoot tr td{
字体大小：粗体；
}
表td{
填充物：5px；
边框底部：实心#EF1px；
}


var json={data:{a:{“id”：“9518”，“订单id”：“11380”，“小部件id”：“9”，“数字”：“10”，“便士价格”：“12”}，b:{“id”：“9518”，“订单id”：“11380”，“小部件id”：“9”，“数字”：“10”，“便士价格”：“12”}，c:{“id”：“9518”，“订单id”：“11380”，“小部件id”：“9”，“数字”：“10”，“便士价格”：“12”}
var i，
项目,，
listItem=“”；
为了（我在
{"id":"9518","order_id":"11380","widget_id":"9","number":"10","pence_price":"12"}