<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
headerBox {
display: inline-block;
width: 28%;
height: 120px;
vertical-align: top;
margin: 5px
}
barcode {
display: block;
width: 100%;
vertical-align: top;
margin: 5px
}
img {
display: block;
max-width:200px;
max-height:95px;
width: auto;
height: auto;
}
practiceName {
font-size:x-large;
font-weight: bold;
}
billToBox {
display:block;
width: 50%;
height: 80px;
margin: 5px
}
.Notes, .Notes th, .Notes td {
width: 95%;
margin: auto;
border: solid 1px;
text-align: left;
margin-bottom: 20px;
border-collapse:collapse;
}
.Orders th {
border: none;
background-color: darkslategray;
color: white;
font-weight:100;
text-align: left;
}
.Orders {
border: none;
width: 100%
}
.Orders td {
border:none;
}
</style>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="JsBarcode.code128.min.js"></script> <!--Barcode Generator-->
<barcode><svg id="barcode1"></svg></barcode>
<headerBox>
<img src="Omitted for privacy" />
</headerBox>
<headerBox>
<practiceName>PPI PLUS</practiceName><br />
ADDRESS<br />
CITY STATE ZIP <br />
PHONE
</headerBox>
<headerBox>
DATE<br />
INVOICE<br />
</headerBox>
<billToBox>
<b>Bill To:</b> <br />
Rusty Shackleford<br />
512 Rainy St.<br />
Arlen, TX 55555<br />
</billToBox>
<table class="Notes">
<thead>
<tr>
<th style="width:450px">Notes:</th>
<th style="width:150px">Via</th>
<th style="width:80px">DOB</th>
</tr>
</thead>
<tr>
<td>Notes mofo</td>
<td>Via</td>
<td>10/10/1900</td>
</tr>
</table>
<table class="Orders" id="ordersTable">
<thead>
<tr>
<th>Ordered</th>
<th>Item Code</th>
<th>Description</th>
<th>Its Serial Number</th>
<th>Mil Lot Number</th>
<th>Shipped</th>
</tr>
</thead>
</table>
<script>
var data = [];
for (var i = 0; i < 5; i++) {
data.push({
ordered: 2,
itemCode: "code" + i,
description: "plumbus",
itsSerialNumber: "",
milLotNumber: "",
shipped: 2
})
}
function addToTable(data) {
var table = document.getElementById("ordersTable");
for (var i = 0; i < data.length; i++) {
var currentOrder = data[i];
var row = table.insertRow();
var ordered = row.insertCell(0);
var itemCode = row.insertCell(1);
var description = row.insertCell(2);
var itsSerialNumber = row.insertCell(3);
var milLotNumber = row.insertCell(4)
var shipped = row.insertCell(5);
ordered.innerHTML = currentOrder.ordered;
itemCode.innerHTML = currentOrder.itemCode;
description.innerHTML = currentOrder.description;
itsSerialNumber.innerHTML = currentOrder.itsSerialNumber;
milLotNumber.innerHTML = currentOrder.milLotNumber;
shipped.innerHTML = currentOrder.shipped;
}
}
addToTable(data);
JsBarcode("#barcode1", "Pkg-15825-91", {
displayValue: true,
height: 30,
width: 3,
textPosition: "bottom",
textAlign: "left"
});
</script>
</body>
</html>