使用JSON制作动态HTML表

时间：2018-11-15 14:55:32

标签： javascript html json

我想使用json数据创建HTML表。 json数据会随着时间变化。当将此json数据转换为HTML表时，该表看起来是一致的。这意味着货币值和表格的宽度对齐。如何将json数据转换为HTML表？

<html>
   <head>
      <title>Hello</title>
      <style>
         table{
         font-family: 'Courier New', Courier, monospace;
         }
         td#aliCenter{
         text-align:center;
         }
         td#aliRight{
         text-align:right;
         }
         td#myId{
         text-align:center;
         font-size: 13px;
         }

      </style>
   </head>
   <body>
      <table width="302.362205"> <!-- To print paper size is 80 cm (=302.362205 pixel) -->
         <!-- header -->
         <tr>
            <td colspan="5" id="aliCenter">Moring Cafe<br>Main Road, Kandawala<br>Contact : 111-555-878</td>
         </tr>
         <tr>
            <td colspan="5" id="myId">15/11/2018 16:14:52&nbsp;&nbsp;SAKTHY&nbsp;&nbsp;No: 24</td>
         </tr>
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <tr>
            <td id="aliCenter">NO</td>
            <td id="aliCenter">ITEM</td>
            <td id="aliCenter">QTY</td>
            <td id="aliCenter">PRICE</td>
            <td id="aliCenter">AMOUNT</td>
         </tr>
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <!-- buying items -->
         <tr>
            <td>1</td>
            <td colspan="4">Pizza</td>
         </tr>
         <tr>
            <td></td>
            <td>PZ4545</td>
            <td>2.00</td>
            <td id="aliRight">150.00</td>
            <td id="aliRight">300.00</td>
         </tr>
         <tr>
            <td>2</td>
            <td colspan="4">Buggers</td>
         </tr>
         <tr>
            <td></td>
            <td>BR7878</td>
            <td>5.00</td>
            <td id="aliRight">500.00</td>
            <td id="aliRight">2500.00</td>
         </tr>
         <tr>
            <td>3</td>
            <td colspan="4">Cock</td>
         </tr>
         <tr>
            <td></td>
            <td>CC6523</td>
            <td>3.00</td>
            <td id="aliRight">180.00</td>
            <td id="aliRight">540.00</td>
         </tr>
         <!-- footer -->
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <tr>
            <td></td>
            <td colspan="3">Net Total</td>
            <td id="aliRight">3340.00</td>
         </tr>
         <tr></tr>
         <tr>
            <td></td>
            <td colspan="3">Cash</td>
            <td id="aliRight">3500.00</td>
         </tr>
         <tr>
            <td></td>
            <td colspan="3">Balance</td>
            <td id="aliRight">160.00</td>
         </tr>
         <tr></tr>
         <tr>
            <td colspan="5" id="aliCenter">-----------IMPORTANT NOTICE-----------</td>
         </tr>
         <tr>
            <td colspan="5" id="aliCenter">In case of a price discrepancy, <br>return the bill and item within <br> 2 days to refund the difference</td>
         </tr>
      </table>
   </body>
</html>

json数据包含三个主要部分。例如页眉，项目和页脚。页眉和页脚是固定的，但是商品的长度将随客户而变化。这些项目应以上述表格格式散发，而无需更改其一致性。

{
    "header": {
        "invoice": "24",
        "name": "Morning Cafe",
        "address": "Main Road, Kandawala",
        "contact": "111-555-878",
        "date": "15/11/2018 16:14:52",
        "counter": "SAKTHY"
    },
    "items": [{
        "no": "1",
        "item": "Pizza",
        "code":"PZ4545",
        "price": "150.00",
        "qty":"2.00",
        "amount":"300.00"
    },
    {
        "no": "2",
        "item": "Burger",
        "code":"BR7878",
        "price": "500.00",
        "qty":"5.00",
        "amount":"2500.00"
    },
    {
        "no": "3",
        "item": "Cock",
        "code":"CC6523",
        "price": "180.00",
        "qty":"3.00",
        "amount":"540.00"
    }],
    "footer": {
        "total":"3340.00",
        "cash":"3500.00",
        "balance":"160.00",
        "notice": "In case of a price discrepancy, return the bill and item within 2 days to refund the difference."
    },
}

2 个答案:

答案 0 :(得分：3)

这是一个普通的JS解决方案。 JSON被解析为JSON对象。我编辑了HTML，并添加了一些ID为ID的新元素，以便从JavaScript中进行选择。

我编辑了答案。切勿多次使用id。我将其更改为CSS类。对齐现在应该正确了。

编辑：这是一个文件解决方案：https://jsfiddle.net/e3xm1r05/2/ 

var data = JSON.parse(`{
    "header": {
        "invoice": "59",
        "name": "Morning Cafe",
        "address": "Main Road, Kandawala",
        "contact": "111-555-978",
        "date": "12/11/2018 01:28:52",
        "counter": "SAKTHY"
    },
    "items": [{
        "no": "1",
        "item": "Pizza",
        "code":"PZ4566",
        "price": "500.00",
        "qty":"2",
        "amount":"1000.00"
    },
    {
        "no": "2",
        "item": "Burger",
        "code":"BR4587",
        "price": "250.00",
        "qty":"2",
        "amount":"500.00"
    },
    {
        "no": "3",
        "item": "Sample",
        "code":"SE2569",
        "price": "50.00",
        "qty":"5",
        "amount":"250.00"
    }],
    "footer": {
        "total":"1750.00",
        "cash":"2000.00",
        "balance":"250.00",
        "notice": "In case of a price discrepancy, return the bill and item within 2 days to refund the difference."
    }
    }`);

document.getElementById('invoice-name').innerHTML  = data.header.name;
document.getElementById('invoice-address').innerHTML  = data.header.address;
document.getElementById('invoice-contact').innerHTML  = data.header.contact;
document.getElementById('invoice-date').innerHTML  = data.header.date;
document.getElementById('invoice-counter').innerHTML  = data.header.counter;
document.getElementById('invoice-no').innerHTML  = data.header.invoice;

var insertAtRow=5;
var table = document.getElementById("invoice-table");
for(var i = data.items.length-1; i >=0 ;i--)
{
	var item = data.items[i];
  var rowHead = table.insertRow(insertAtRow);
	var rowItem = table.insertRow(insertAtRow+1);
	
  rowHead.insertCell(0).innerHTML = item.no;
  rowHead.insertCell(1).innerHTML = item.item;
  
  rowItem.insertCell(0).innerHTML = "";
	rowItem.insertCell(1).innerHTML = item.code;
	rowItem.insertCell(2).innerHTML = item.qty;
  
  var priceCell = rowItem.insertCell(3);
  var amountCell = rowItem.insertCell(4);
  priceCell.innerHTML = item.price;
  amountCell.innerHTML = item.amount;
  priceCell.classList.add('aliRight');
  amountCell.classList.add('aliRight');
}

document.getElementById('footer-net-total').innerHTML  = data.footer.total;
document.getElementById('footer-cash').innerHTML  = data.footer.cash;
document.getElementById('footer-balance').innerHTML  = data.footer.balance;
document.getElementById('footer-notice').innerHTML  = data.footer.notice;
<html>
   <head>
      <title>Hello</title>
      <style>
         table{
         font-family: 'Courier New', Courier, monospace;
         }
         .aliCenter{
         text-align:center;
         }
         .aliRight{
         text-align:right;
         }
         td#myId{
         text-align:center;
         font-size: 13px;
         }
      </style>
   </head>
   <body>
      <table id="invoice-table" width="302.362205"> <!-- To print paper size is 80 cm (=302.362205 pixel) -->
         <!-- header -->
         <tr>
            <td colspan="5" class="aliCenter">
              <div id="invoice-name"></div>
              <div id="invoice-address"></div>
              <div id="invoice-contact"></div>
            </td>
         </tr>
         <tr>
            <td colspan="5" id="myId"><span id="invoice-date"></span>&nbsp;&nbsp;<span id="invoice-counter"></span>&nbsp;&nbsp;No: <span id="invoice-no"></span></td>
         </tr>
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <tr>
            <td class="aliCenter">NO</td>
            <td class="aliCenter">ITEM</td>
            <td class="aliCenter">QTY</td>
            <td class="aliCenter">PRICE</td>
            <td class="aliCenter">AMOUNT</td>
         </tr>
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <!-- buying items -->
         <!--Script will insert after 6th row!!!-->
         <!-- footer -->
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <tr>
            <td></td>
            <td colspan="3">Net Total</td>
            <td class="aliRight"><span id="footer-net-total"></span></td>
         </tr>
         <tr></tr>
         <tr>
            <td></td>
            <td colspan="3">Cash</td>
            <td class="aliRight"><span id="footer-cash"></span></td>
         </tr>
         <tr>
            <td></td>
            <td colspan="3">Balance</td>
            <td class="aliRight"><span id="footer-balance"></span></td>
         </tr>
         <tr></tr>
         <tr>
            <td colspan="5" class="aliCenter">-------IMPORTANT NOTICE-----------</td>
         </tr>
         <tr>
            <td colspan="5" class="aliCenter"><span id="footer-notice"></td>
         </tr>
      </table>
   </body>
</html>

答案 1 :(得分：0)

您的HTML文件应如下所示：

<!DOCTYPE html>
<html>
   <head>
      <title>Hello</title>
      <style>
         table{
         font-family: 'Courier New', Courier, monospace;
         }
         td#aliCenter{
         text-align:center;
         }
         td#aliRight{
         text-align:right;
         }
         td#myId{
         text-align:center;
         font-size: 13px;
         }

      </style>
   </head>
   <body>
      <table width="302.362205" id="your_table_id"> <!-- To print paper size is 80 cm (=302.362205 pixel) -->
         <!-- header -->
         <tr>
            <td colspan="5" id="aliCenter">Moring Cafe<br>Main Road, Kandawala<br>Contact : 111-555-878</td>
         </tr>
         <tr>
            <td colspan="5" id="myId">15/11/2018 16:14:52&nbsp;&nbsp;SAKTHY&nbsp;&nbsp;No: 24</td>
         </tr>
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <tr>
            <td id="aliCenter">NO</td>
            <td id="aliCenter">ITEM</td>
            <td id="aliCenter">QTY</td>
            <td id="aliCenter">PRICE</td>
            <td id="aliCenter">AMOUNT</td>
         </tr>
         <tr>
            <td colspan="5">
               <hr>
            </td>
         </tr>
         <!-- buying items -->

         <script>
        var json_data = JSON.parse('{
    "header": {
        "invoice": "59",
        "name": "Morning Cafe",
        "address": "Main Road, Kandawala",
        "contact": "111-555-978",
        "date": "12/11/2018 01:28:52",
        "counter": "SAKTHY"
    },
    "items": [{
        "no": "1",
        "item": "Pizza",
        "code":"PZ4566",
        "price": "500.00",
        "qty":"2",
        "amount":"1000.00"
    },
    {
        "no": "2",
        "item": "Burger",
        "code":"BR4587",
        "price": "250.00",
        "qty":"2",
        "amount":"500.00"
    },
    {
        "no": "3",
        "item": "Sample",
        "code":"SE2569",
        "price": "50.00",
        "qty":"5",
        "amount":"250.00"
    }],
    "footer": {
        "total":"1750.00",
        "cash":"2000.00",
        "balance":"250.00",
        "notice": "In case of a price discrepancy, return the bill and item within 2 days to refund the difference."
    },
}');

//Items - You can simply hard code the header into your HTML
for (var i = 0;i<json_data["items"].length;i++){

    document.getElementById("your_table_id").innerHTML+="<tr><td>" + json_data["items"][i]["no"] + 
    "</td><td colspan='4'>" + json_data["items"][i]["item"] + 
    "</td></tr><tr><td></td><td>" + json_data["items"][i]["code"] + 
    "</td><td>" + json_data["items"][i]["price"] + 
    "</td><td>" + json_data["items"][i]["qty"] + 
    "</td><td>" + json_data["items"][i]["amount"] + 
    "</td></tr>" ;
}

//Then write some code to generate the footer.
document.getElementById("your_table_id").innerHTML+="<tr><td colspan='5'><hr></td></tr><tr><td></td><td colspan='3'>Net Total</td><td id='aliRight'>" + json_data["footer"]["total"] + "</td></tr><tr></tr><tr><td></td><td colspan='3'>Cash</td><td id='aliRight'>" + json_data["footer"]["cash"] + "</td></tr><tr><td></td><td colspan='3'>Balance</td><td id='aliRight'>" + json_data["footer"]["balance"] + "</td></tr><tr></tr><tr><td colspan='5' id='aliCenter'>-----------IMPORTANT NOTICE-----------</td></tr><tr><td colspan='5' id='aliCenter'>" + json_data["footer"]["notice"] + "</td></tr>";
     </script>
      </table>
   </body>
</html>
相关问题
最新问题