使用JavaScript和JSON创建一个HTML表格 [英] Creating an HTML table using JavaScript and JSON

问题描述

我试图从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 
  

我想要的是：

  11  -  Widget 8 x 10GBP 110GBP 
 10 - 小部件9 x 10GBP 100GBP 
  

数字，小工具和成本是左对齐的，总数是右对齐的。我还希望分开单独的订单。

JSON中的数据是：

  {id：9518，order_id：11380，widget_id：9，number：10，pence_price：12} 
  

我一直在用这个拉我的头发;任何帮助或指导将不胜感激。

解决方案

  var json = {data：{a：{id：9518，order_id：11380，widget_id：9，number：10，pence_price 12 }，b：{ ID ： 9518\" ， ORDER_ID： 11380， WIDGET_ID： 9， 号码： 10， pence_price： 12}，C： {id：9518，order_id：11380，widget_id：9，number：10，pence_price：12}}} var i，item，listItem = ; for（i in json.data）{item = json.data [i]; < div>< div class ='table'>< div>+ item.number + - +（Widget+ item.widget_id +）x++ item.pence_price +GBP< / div>< div class ='right'>+ item.number * item.pence_price +GBP< / div>< / div>;} document.getElementById（'updateOrder'）。innerHTML = listItem; / code> 

#updateOrder {padding：2px; background：orange;}。table {width：100％;背景：绿色; display：table;}。table> div {display：table-cell;}。right {background：tomato;}

 < div id =updateOrder>< / div>  

I am trying to create an HTML table using JavaScript from a JSON input, however, it's not working out for me.

I am using a marker in the HTML. This will get populated from an innerHTML call in Javascript:

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;

This gives me the following output:

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

What I want is the following:

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

Where the number, widget and cost are left-aligned, and the total is right-aligned. I also want separate orders on separate lines.

The data in the JSON is:

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

I've been pulling my hair out with this; any help or guidance would be appreciated.

解决方案

var json = {data:{a: {"id":"9518","order_id":"11380","widget_id":"9","number":"10","pence_price":"12"},b:{"id":"9518","order_id":"11380","widget_id":"9","number":"10","pence_price":"12"},c: {"id":"9518","order_id":"11380","widget_id":"9","number":"10","pence_price":"12"}}}
var i,
    item,
    listItem = "";
for (i in json.data){
    item = json.data[i];
    listItem += "<div class='table'><div>"+item.number+"--"+"( Widget "+item.widget_id+") x "+"  "+item.pence_price+" GBP</div><div class='right'>"+item.number*item.pence_price+" GBP</div></div>";
}
document.getElementById('updateOrder').innerHTML=listItem;

#updateOrder{
  padding: 2px;
  background: orange;
}
.table{
  width: 100%;
  background: green;
  display: table;
}
.table > div{
  display: table-cell;
}
.right{
  background: tomato;
}

<div id="updateOrder"></div>

这篇关于使用JavaScript和JSON创建一个HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！