Making a dynamic HTML table using json
2
I want to create an HTML table using json data. The json data will change over time. When convert this json data to HTML table, the table look like this with consistent. It means the alignment of money values and the width of the table. How can I convert the json data into HTML table?
<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 SAKTHY 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>The json data contains main three parts. Such as header, items and footer. The header and footer is fixed, but the items's length will change over customers. The items should be circulate with the above table format, without changing the consistence.
{
"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."
},
}
javascript html json
asked Nov 15 '18 at 14:55
SAKTHYSAKTHY
286
add a comment |
2
I want to create an HTML table using json data. The json data will change over time. When convert this json data to HTML table, the table look like this with consistent. It means the alignment of money values and the width of the table. How can I convert the json data into HTML table?
<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 SAKTHY 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>The json data contains main three parts. Such as header, items and footer. The header and footer is fixed, but the items's length will change over customers. The items should be circulate with the above table format, without changing the consistence.
{
"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."
},
}
javascript html json
asked Nov 15 '18 at 14:55
SAKTHYSAKTHY
286
What is your question?
– jmargolisvt
Nov 15 '18 at 14:58
@jmargolisvt, see the updated
– SAKTHY
Nov 15 '18 at 15:07
add a comment |
2
2
2
I want to create an HTML table using json data. The json data will change over time. When convert this json data to HTML table, the table look like this with consistent. It means the alignment of money values and the width of the table. How can I convert the json data into HTML table?
<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 SAKTHY 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>The json data contains main three parts. Such as header, items and footer. The header and footer is fixed, but the items's length will change over customers. The items should be circulate with the above table format, without changing the consistence.
{
"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."
},
}
javascript html json
asked Nov 15 '18 at 14:55
SAKTHYSAKTHY
286
I want to create an HTML table using json data. The json data will change over time. When convert this json data to HTML table, the table look like this with consistent. It means the alignment of money values and the width of the table. How can I convert the json data into HTML table?
<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 SAKTHY 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>The json data contains main three parts. Such as header, items and footer. The header and footer is fixed, but the items's length will change over customers. The items should be circulate with the above table format, without changing the consistence.
{
"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."
},
}
<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 SAKTHY 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><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 SAKTHY 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>javascript html json
javascript html json
asked Nov 15 '18 at 14:55
SAKTHYSAKTHY
286
asked Nov 15 '18 at 14:55
SAKTHYSAKTHY
286
edited Nov 15 '18 at 15:29
SAKTHY
asked Nov 15 '18 at 14:55
SAKTHYSAKTHY
286
asked Nov 15 '18 at 14:55
SAKTHYSAKTHY
286
asked Nov 15 '18 at 14:55
SAKTHYSAKTHY
286
286
What is your question?
– jmargolisvt
Nov 15 '18 at 14:58
@jmargolisvt, see the updated
– SAKTHY
Nov 15 '18 at 15:07
add a comment |
What is your question?
– jmargolisvt
Nov 15 '18 at 14:58
@jmargolisvt, see the updated
– SAKTHY
Nov 15 '18 at 15:07
What is your question?
– jmargolisvt
Nov 15 '18 at 14:58
What is your question?
– jmargolisvt
Nov 15 '18 at 14:58
@jmargolisvt, see the updated
– SAKTHY
Nov 15 '18 at 15:07
@jmargolisvt, see the updated
– SAKTHY
Nov 15 '18 at 15:07
add a comment |
2 Answers
2
active
oldest
votes
3
This is a plain JS solution. The JSON is parsed as a JSON object. I edited your HTML and added some new elements with an ID to select them from within JavaScript.
I edited my answer. NEVER use id multiple times. I changed it to a CSS class. Align should be correct now.
EDIT: Here is a single file solution: 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> <span id="invoice-counter"></span> 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>answered Nov 15 '18 at 15:24
DoubleVoidDoubleVoid
368629
Sorry!, Did you changed the code on my post? Because I did not see, at that time I also edited.
– SAKTHY
Nov 15 '18 at 15:31
I just updated my code, not yours
– DoubleVoid
Nov 15 '18 at 15:33
Thank you I will see
– SAKTHY
Nov 15 '18 at 15:42
Why the<hr>lies two times before starting items, but not before theNet Total?
– SAKTHY
Nov 15 '18 at 16:01
Sorry, I started inserting the items one row too late. Should be fixed now. Can't test it myself, am on my mobile right now
– DoubleVoid
Nov 15 '18 at 16:09
|
show 9 more comments
0
Your HTML file should look something like this:
<!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 SAKTHY 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>
answered Nov 15 '18 at 15:12
Caleb H.Caleb H.
36311
Last two<td>s ? It meansqtyandamount?
– SAKTHY
Nov 15 '18 at 15:20
Please see my update json data according to the html content
– SAKTHY
Nov 15 '18 at 15:31
How to add header and footer, It would appreciated
– SAKTHY
Nov 15 '18 at 16:04
How can I run this code?
– SAKTHY
Nov 15 '18 at 16:17
1
Thank yo so much.
– SAKTHY
Nov 20 '18 at 16:12
|
show 10 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53322159%2fmaking-a-dynamic-html-table-using-json%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
This is a plain JS solution. The JSON is parsed as a JSON object. I edited your HTML and added some new elements with an ID to select them from within JavaScript.
I edited my answer. NEVER use id multiple times. I changed it to a CSS class. Align should be correct now.
EDIT: Here is a single file solution: 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> <span id="invoice-counter"></span> 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>answered Nov 15 '18 at 15:24
DoubleVoidDoubleVoid
368629
Sorry!, Did you changed the code on my post? Because I did not see, at that time I also edited.
– SAKTHY
Nov 15 '18 at 15:31
I just updated my code, not yours
– DoubleVoid
Nov 15 '18 at 15:33
Thank you I will see
– SAKTHY
Nov 15 '18 at 15:42
Why the<hr>lies two times before starting items, but not before theNet Total?
– SAKTHY
Nov 15 '18 at 16:01
Sorry, I started inserting the items one row too late. Should be fixed now. Can't test it myself, am on my mobile right now
– DoubleVoid
Nov 15 '18 at 16:09
|
show 9 more comments
3
This is a plain JS solution. The JSON is parsed as a JSON object. I edited your HTML and added some new elements with an ID to select them from within JavaScript.
I edited my answer. NEVER use id multiple times. I changed it to a CSS class. Align should be correct now.
EDIT: Here is a single file solution: 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> <span id="invoice-counter"></span> 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>answered Nov 15 '18 at 15:24
DoubleVoidDoubleVoid
368629
Sorry!, Did you changed the code on my post? Because I did not see, at that time I also edited.
– SAKTHY
Nov 15 '18 at 15:31
I just updated my code, not yours
– DoubleVoid
Nov 15 '18 at 15:33
Thank you I will see
– SAKTHY
Nov 15 '18 at 15:42
Why the<hr>lies two times before starting items, but not before theNet Total?
– SAKTHY
Nov 15 '18 at 16:01
Sorry, I started inserting the items one row too late. Should be fixed now. Can't test it myself, am on my mobile right now
– DoubleVoid
Nov 15 '18 at 16:09
|
show 9 more comments
3
3
3
This is a plain JS solution. The JSON is parsed as a JSON object. I edited your HTML and added some new elements with an ID to select them from within JavaScript.
I edited my answer. NEVER use id multiple times. I changed it to a CSS class. Align should be correct now.
EDIT: Here is a single file solution: 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> <span id="invoice-counter"></span> 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>answered Nov 15 '18 at 15:24
DoubleVoidDoubleVoid
368629
This is a plain JS solution. The JSON is parsed as a JSON object. I edited your HTML and added some new elements with an ID to select them from within JavaScript.
I edited my answer. NEVER use id multiple times. I changed it to a CSS class. Align should be correct now.
EDIT: Here is a single file solution: 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> <span id="invoice-counter"></span> 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>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> <span id="invoice-counter"></span> 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>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> <span id="invoice-counter"></span> 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>answered Nov 15 '18 at 15:24
DoubleVoidDoubleVoid
368629
edited Nov 16 '18 at 10:48
answered Nov 15 '18 at 15:24
DoubleVoidDoubleVoid
368629
answered Nov 15 '18 at 15:24
DoubleVoidDoubleVoid
368629
answered Nov 15 '18 at 15:24
DoubleVoidDoubleVoid
368629
368629
Sorry!, Did you changed the code on my post? Because I did not see, at that time I also edited.
– SAKTHY
Nov 15 '18 at 15:31
I just updated my code, not yours
– DoubleVoid
Nov 15 '18 at 15:33
Thank you I will see
– SAKTHY
Nov 15 '18 at 15:42
Why the<hr>lies two times before starting items, but not before theNet Total?
– SAKTHY
Nov 15 '18 at 16:01
Sorry, I started inserting the items one row too late. Should be fixed now. Can't test it myself, am on my mobile right now
– DoubleVoid
Nov 15 '18 at 16:09
|
show 9 more comments
Sorry!, Did you changed the code on my post? Because I did not see, at that time I also edited.
– SAKTHY
Nov 15 '18 at 15:31
I just updated my code, not yours
– DoubleVoid
Nov 15 '18 at 15:33
Thank you I will see
– SAKTHY
Nov 15 '18 at 15:42
Why the<hr>lies two times before starting items, but not before theNet Total?
– SAKTHY
Nov 15 '18 at 16:01
Sorry, I started inserting the items one row too late. Should be fixed now. Can't test it myself, am on my mobile right now
– DoubleVoid
Nov 15 '18 at 16:09
Sorry!, Did you changed the code on my post? Because I did not see, at that time I also edited.
– SAKTHY
Nov 15 '18 at 15:31
Sorry!, Did you changed the code on my post? Because I did not see, at that time I also edited.
– SAKTHY
Nov 15 '18 at 15:31
I just updated my code, not yours
– DoubleVoid
Nov 15 '18 at 15:33
I just updated my code, not yours
– DoubleVoid
Nov 15 '18 at 15:33
Thank you I will see
– SAKTHY
Nov 15 '18 at 15:42
Thank you I will see
– SAKTHY
Nov 15 '18 at 15:42
Why the
<hr> lies two times before starting items, but not before the Net Total ?– SAKTHY
Nov 15 '18 at 16:01
Why the
<hr> lies two times before starting items, but not before the Net Total ?– SAKTHY
Nov 15 '18 at 16:01
Sorry, I started inserting the items one row too late. Should be fixed now. Can't test it myself, am on my mobile right now
– DoubleVoid
Nov 15 '18 at 16:09
Sorry, I started inserting the items one row too late. Should be fixed now. Can't test it myself, am on my mobile right now
– DoubleVoid
Nov 15 '18 at 16:09
|
show 9 more comments
0
Your HTML file should look something like this:
<!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 SAKTHY 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>
answered Nov 15 '18 at 15:12
Caleb H.Caleb H.
36311
Last two<td>s ? It meansqtyandamount?
– SAKTHY
Nov 15 '18 at 15:20
Please see my update json data according to the html content
– SAKTHY
Nov 15 '18 at 15:31
How to add header and footer, It would appreciated
– SAKTHY
Nov 15 '18 at 16:04
How can I run this code?
– SAKTHY
Nov 15 '18 at 16:17
1
Thank yo so much.
– SAKTHY
Nov 20 '18 at 16:12
|
show 10 more comments
0
Your HTML file should look something like this:
<!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 SAKTHY 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>
answered Nov 15 '18 at 15:12
Caleb H.Caleb H.
36311
Last two<td>s ? It meansqtyandamount?
– SAKTHY
Nov 15 '18 at 15:20
Please see my update json data according to the html content
– SAKTHY
Nov 15 '18 at 15:31
How to add header and footer, It would appreciated
– SAKTHY
Nov 15 '18 at 16:04
How can I run this code?
– SAKTHY
Nov 15 '18 at 16:17
1
Thank yo so much.
– SAKTHY
Nov 20 '18 at 16:12
|
show 10 more comments
0
0
0
Your HTML file should look something like this:
<!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 SAKTHY 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>
answered Nov 15 '18 at 15:12
Caleb H.Caleb H.
36311
Your HTML file should look something like this:
<!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 SAKTHY 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>
answered Nov 15 '18 at 15:12
Caleb H.Caleb H.
36311
edited Nov 16 '18 at 13:39
answered Nov 15 '18 at 15:12
Caleb H.Caleb H.
36311
answered Nov 15 '18 at 15:12
Caleb H.Caleb H.
36311
answered Nov 15 '18 at 15:12
Caleb H.Caleb H.
36311
36311
Last two<td>s ? It meansqtyandamount?
– SAKTHY
Nov 15 '18 at 15:20
Please see my update json data according to the html content
– SAKTHY
Nov 15 '18 at 15:31
How to add header and footer, It would appreciated
– SAKTHY
Nov 15 '18 at 16:04
How can I run this code?
– SAKTHY
Nov 15 '18 at 16:17
1
Thank yo so much.
– SAKTHY
Nov 20 '18 at 16:12
|
show 10 more comments
Last two<td>s ? It meansqtyandamount?
– SAKTHY
Nov 15 '18 at 15:20
Please see my update json data according to the html content
– SAKTHY
Nov 15 '18 at 15:31
How to add header and footer, It would appreciated
– SAKTHY
Nov 15 '18 at 16:04
How can I run this code?
– SAKTHY
Nov 15 '18 at 16:17
1
Thank yo so much.
– SAKTHY
Nov 20 '18 at 16:12
Last two
<td>s ? It means qty and amount ?– SAKTHY
Nov 15 '18 at 15:20
Last two
<td>s ? It means qty and amount ?– SAKTHY
Nov 15 '18 at 15:20
Please see my update json data according to the html content
– SAKTHY
Nov 15 '18 at 15:31
Please see my update json data according to the html content
– SAKTHY
Nov 15 '18 at 15:31
How to add header and footer, It would appreciated
– SAKTHY
Nov 15 '18 at 16:04
How to add header and footer, It would appreciated
– SAKTHY
Nov 15 '18 at 16:04
How can I run this code?
– SAKTHY
Nov 15 '18 at 16:17
How can I run this code?
– SAKTHY
Nov 15 '18 at 16:17
1
1
Thank yo so much.
– SAKTHY
Nov 20 '18 at 16:12
Thank yo so much.
– SAKTHY
Nov 20 '18 at 16:12
|
show 10 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53322159%2fmaking-a-dynamic-html-table-using-json%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is your question?
– jmargolisvt
Nov 15 '18 at 14:58
@jmargolisvt, see the updated
– SAKTHY
Nov 15 '18 at 15:07