<body>
<h3>단가 x 수량 일람표</h3>
<table border="1" id="mytable">
<tr>
<th>갯수</th><th>제품 A</th><th>제품 B</th><th>제품 C</th>
</tr>
</table>
<script type="text/javascript">
//기존 값이 정해졌을 경우 ---
/* let a = 300;
let b = 450;
let c = 520; */
// file로 read -> 불규칙한 값을 불러올 경우
let aArr = [ 23, 43, 1, 34, 56 ];
let bArr = [ 3, 67, 22, 45, 65 ];
let cArr = [ 12, 34, 23, 45, 11 ];
let tbody = document.getElementById("mytable");
for(i = 0;i < aArr.length; i++){
let trow = document.createElement("tr"); // <tr></tr>
let thead = document.createElement("th"); // <th></th>
thead.appendChild(document.createTextNode((i + 1) + ""));// <th>1</th>
let tdata1 = document.createElement("td"); // <td></td>
tdata1.appendChild( document.createTextNode(aArr[i]) ); // <td>300</td>
//a = a + 300;
let tdata2 = document.createElement("td");
tdata2.appendChild( document.createTextNode(bArr[i]) );
//b = b + 450;
let tdata3 = document.createElement("td");
tdata3.appendChild( document.createTextNode(cArr[i]) );
//c = c + 520;
// th, td, td, td -> tr 추가
trow.appendChild(thead);
trow.appendChild(tdata1);
trow.appendChild(tdata2);
trow.appendChild(tdata3);
// tr -> table 추가
tbody.appendChild(trow);
}
</script>
</body>
