时间戳

首页 > 解决方案 > 使用 json 制作动态 HTML 表格

javascript - 使用 json 制作动态 HTML 表格

问题描述

我想使用 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."
    },
}

标签： javascripthtmljson

解决方案

这是一个简单的 JS 解决方案。JSON 被解析为 JSON 对象。我编辑了您的 HTML 并添加了一些带有 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>

推荐阅读