I just realized that you prefer not to use JS as well.
I will provide this answer as a partial solution to your issue.
Here is the Proposed Solution:
If you are looking to avoid using any library like JQuery or frameworks such as Angular/React/Vue, you can consider utilizing Web components (You can refer to the link for more details).
Note: Always make sure to verify Browser compatibility.
When exploring this option, you have the flexibility to opt for either HTML templates or Custom elements.
Let's illustrate with an example featuring an HTML template:
<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>
After setting up the table and defining the template, JavaScript can be used to insert rows into the table based on the template:
// Check if the browser supports the HTML template element by inspecting
// the template element's content attribute presence.
if ('content' in document.createElement('template')) {
// Populate the table using the existing HTML tbody
// and the template-derived row
var template = document.querySelector('#productrow');
// Duplicate the new row and add it to the table
var tbody = document.querySelector("tbody");
var clone = document.importNode(template.content, true);
var td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild(clone);
// Duplicate the new row and add it to the table
var clone2 = document.importNode(template.content, true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild(clone2);
} else {
// Look for alternative methods to append rows to the table as
// the HTML template element is not supported.
}
Understanding Web Components (Taken from developer.mozilla.org documentation)
As developers, we acknowledge the benefits of code reusability. Custom markup structures have historically posed challenges in terms of reusability — envision the intricate HTML (and related style and script) needed to render custom UI controls, and the potential messiness when deploying them multiple times throughout a page.
Web Components address these issues — comprising three key technologies that work collectively to establish adaptable custom elements with encapsulated functionality for seamless reuse, minus concerns about code conflicts:
- Custom elements: Embrace a suite of JavaScript APIs for crafting custom elements and their functionalities, effectively integrated within your user interface.
- Shadow DOM: Utilize a set of JavaScript APIs to affix an encapsulated "shadow" DOM tree to an element, distinct from the main document DOM, ensuring control over associated features. By doing so, you can maintain an element's attributes privately, allowing scripting and styling without risk of interference with other elements in the document.
- HTML templates: Leverage the
<template> and <slot> elements to draft concealed markup templates absent in the rendered page, enabling repeated reuse as structural foundations for a customized element.