例

by techyankee

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/ja/docs/Web/HTML/Element/template -->
<button id="button" type="button" name="button">追加</button>

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 必要に応じて既存のデータをここに含められます。 -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

CSS

table {
  background: #000;
}
table td {
  background: #fff;
}

JavaScript

document.getElementById("button").onclick = function() {
  // templete 要素の content 属性の有無を確認することで、
// ブラウザーが HTML template 要素に対応しているかテストします。
if ('content' in document.createElement('template')) {

    // 既存の HTML tbody と template の行を使って
    // table をインスタンス生成します。
    var template = document.querySelector('#productrow');

    // 新しい行を複製して表に挿入します。
    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);

    // 新しい行を複製して表に挿入します。
    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 {
  // HTML template 要素に対応していないので 
  // 表に行を追加するほかの方法を探します。
}

    console.log('追加');
  };