通过 JavaScript 代码，将 <template> 中的内容插入到表格中 - 在线编辑器

          <style>
  table {
    background: #000;
  }

  table td {
    background: #fff;
  }
</style>

<table id="producttable">
  <thead>
    <tr>
      <td>UPC 代码</td>
      <td>商品名称</td>
    </tr>
  </thead>
  <tbody>
    <!-- 已有数据可以填写在这里 -->
  </tbody>
</table>

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

<script>
  // 通过检查模板元素的 content 属性的存在来测试浏览器是否支持 HTML 模板元素。
  if ('content' in document.createElement('template')) {
    // 使用现有的 HTML tbody 和带有模板的行来实例化表
    var t = document.querySelector('#productrow'),
      td = t.content.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";
    
    // 克隆新行并将其插入表中
    var tb = document.querySelector("tbody");
    var clone = document.importNode(t.content, true);
    tb.appendChild(clone);
    
    // 创建一个新行
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans";
    
    // 克隆新行并将其插入表中
    var clone2 = document.importNode(t.content, true);
    tb.appendChild(clone2);
  } else {
    // 因为不支持 HTML 模板元素，所以要找另一种方法来添加行到表
  }
</script>

        