使用 json 制作动态 HTML 表格

【问题标题】：Making a dynamic HTML table using json使用 json 制作动态 HTML 表格
【发布时间】：2018-11-15 14:55:32
【问题描述】：

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

【问题讨论】：

  • 你有什么问题？
  • @jmargolisvt，查看更新

标签： javascript html json


【解决方案1】：

这是一个简单的 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>

【讨论】：

  • 对不起！，您是否更改了我帖子上的代码？因为没看到，当时我也编辑了。
  • 为什么&lt;hr&gt; 在开始项目之前存在两次，而不是在Net Total 之前？
  • 抱歉，我开始插入项目太晚了。现在应该修好了。自己无法测试，现在在我的手机上
  • 很好用，我可以用这个打印收据EPSON TM-T82 Receipt
  • 因为这是一台 POS 打印机 => 它需要原始数据（仅限字符），所以这是不可能的。也许看看this question
【解决方案2】：

您的 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>

【讨论】：

  • 最后两个&lt;td&gt;s ?这意味着qty 和amount ?
  • 请看我根据html内容更新json数据
  • 如何添加页眉和页脚，不胜感激
  • 好的，我更新了我的答案。只需保留您已有的标题 HTML，但请确保为您的表格提供 ID
  • 非常感谢。
猜你喜欢
  • 1970-01-01
  • 2019-05-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-08-04
  • 1970-01-01
  • 2010-10-28
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode