HTML Template

by stevenkaspar

HTML

<template>
  <tr>
    <td data-number></td>
    <td data-quantity></td>
  </tr>
</template>

<table>
  <thead>
    <tr>
      <th>
        Number
      </th>
      <th>
        Quantity
      </th>
    </tr>
  </thead>
  <tbody id='RowContainer'>
    <tr>
      <td data-number>0</td>
      <td data-quantity></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>
        <form id='AddRowForm'>
          <input type='number' id='QuantityInput'/>
        </form>
      </td>
    </tr>
  </tfoot>
</table>

CSS

th {
  text-align: left;
}
th, td {
  padding-right: 10px;
}

JavaScript

var counter = 0;

function addRow(e) {
  e.preventDefault();
  
  var content = document.querySelector('template').content;
  var number_cell = content.querySelector('[data-number]');
  number_cell.textContent = ++counter;
  
  var quantity_cell = content.querySelector('[data-quantity]');
  quantity_cell.textContent = document.getElementById('QuantityInput').value;
  
  document.getElementById('RowContainer').appendChild(
      document.importNode(content, true));
  return false;
}

document.getElementById('AddRowForm').addEventListener('submit', addRow);