<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
var t = document.querySelector('#productrow')
function appendRow(data) {
const cells = t.content.querySelectorAll("td");
cells[0].textContent = data[0];
cells[1].textContent = data[1];
var clone = document.importNode(t.content, true);
document.querySelector("tbody").appendChild(clone);
}
appendRow(['foo', 'bar'])
setInterval(() => appendRow(['Now is', (new Date()).toLocaleString()]), 1000)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.