<template> 「テンプレート」[読み方：テンプレート]

<script>
var wNo = 1;
// 行の追加
function rowAdd() {
// template取得
var objTemplate = document.querySelector('#t1');

// template内のSPANをカウントUP
wNo = wNo + 1;
var objSpan = objTemplate.content.querySelector('#s1');
objSpan.textContent = wNo;

// templateのDIVにIDを付ける
var objDiv = objTemplate.content.querySelector('.c1'); //classで項目を特定しIDを付ける
objDiv.setAttribute("id", "elRow" + wNo);

// templateを追加
document.querySelector('#d1').appendChild(document.importNode(objTemplate.content, true));
}
// 行の削除
function rowDel() {
if(wNo <=1){retrun;}

var objOya = document.getElementById("d1");
var objKo = document.getElementById("elRow" + wNo);

objOya.removeChild(objKo);

wNo = wNo - 1;
}
</script>

<table id="css-s1">
<tr>
<th>NO</th>
<th>商品番号</th>
<th>商品名</th>
<th>色</th>
<th>サイズ</th>
<th>個数</th>
</tr>
<tr>
<td width="15">1</td>
<td><input type="text" name="ENTRY_1" size="15"></td>
<td><input type="text" name="ENTRY_2" size="25"></td>
<td><input type="text" name="ENTRY_3" size="5"></td>
<td><input type="text" name="ENTRY_4" size="5"></td>
<td><input type="text" name="ENTRY_5" size="5"></td>
</tr>
</table>

<template id="t1">
<div class="c1">
<table id="css-s1">
<tr>
<td width="15"><span id="s1">0</span></td>
<td><input type="text" name="ENTRY_1" size="15"></td>
<td><input type="text" name="ENTRY_2" size="25"></td>
<td><input type="text" name="ENTRY_3" size="5"></td>
<td><input type="text" name="ENTRY_4" size="5"></td>
<td><input type="text" name="ENTRY_5" size="5"></td>
</tr>
</table>
</div>
</template>
<div id="d1"></div>
<br>
<div>
<input type="button" value="商品追加" onclick="rowAdd();">
<input type="button" value="商品削除" onclick="rowDel();">
</div>

<button onclick="change(1)">１月分</button>
<button onclick="change(2)">２月分</button>

</div>
<br>

<table id="css-s1">
<thead>
<tr>
<th>月</th>
<th>名前</th>
<th>出身地</th>
<th>性別</th>
<th>年齢</th>
</tr>
</thead>
<tbody id="oya">
<template id="row">
<tr id="ko">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</template>
</tbody>
</table>

<script>
// １月分データ
var data = [
{ 月: '１月', 名前: '日本太郎', 出身地: '東京都', 性別: '男性', 年齢: 30 },
{ 月: '１月', 名前: '日本次郎', 出身地: '長野県', 性別: '男性', 年齢: 28 },
{ 月: '１月', 名前: '日本三郎', 出身地: '大阪府', 性別: '男性', 年齢: 24 },
{ 月: '１月', 名前: '日本花子', 出身地: '鹿児島県', 性別: '女性', 年齢: 31 },
{ 月: '１月', 名前: '日本富子', 出身地: '北海道', 性別: '女性', 年齢: 21 }
];
// ２月分データ
var data2 = [
{ 月: '２月', 名前: 'にほんたろう', 出身地: 'おおさかふ', 性別: 'おとこ', 年齢: 50 },
{ 月: '２月', 名前: 'にほんじろう', 出身地: 'かごしまけん', 性別: 'おとこ', 年齢: 48 },
{ 月: '２月', 名前: 'にほんとみこ', 出身地: 'ながのけん', 性別: 'おんな', 年齢: 61 }
];
</script>

<script>
function change(no){

var objoya=document.getElementById("oya");

//"tr"の数で行数を取得
var trcnt=objoya.getElementsByTagName("tr");
var num=trcnt.length;

//行数回繰り返し、行単位に順にすべて削除
for(var i =num-1;i>=0; i--){
var objko=document.getElementById("ko");
objoya.removeChild(objko);
}
// template取得
var objtemplate = document.querySelector('#row');
var cat;

for (var i = 0; i < data.length; i += 1) {
if(no==1){
cat = data[i];

}else{
cat = data2[i];
}

var clone = objtemplate.content.cloneNode(true);
var cells = clone.querySelectorAll('td');
cells[0].textContent = cat.月;
cells[1].textContent = cat.名前;
cells[2].textContent = cat.出身地;
cells[3].textContent = cat.性別;
cells[4].textContent = cat.年齢;
objtemplate.parentNode.appendChild(clone);
}
}
</script>