HTML의 table(테이블) 연습으로 PC 견적서를 만들어 봤습니다. 제품 데이터는 Object의 배열로 만들고 Javascript로 table에 붙여넣었습니다.
가성비 PC 견적서
| 분류 | 상품명 | 수량 | 가격 |
|---|
<!DOCTYPE html>
<style>
#myTable {
width: 100%; border-collapse: collapse; text-align: center;
}
#myTable, #myTable th, #myTable td { border: 1px solid lightgray; }
#myTable th, #myTable td { padding: 5px 10px; }
#myTable th {
white-space: nowrap; background: forestgreen; color: white;
}
#myTable tr:nth-child(odd) { background: #eee; }
#myTable a { text-decoration: none; color: royalblue; }
#myTable a:hover { text-decoration: underline; }
#total { display: inline-block; font-weight: bold; font-size: 18px;
padding: 8px 20px; background: pink; color: #555;
}
</style>
<div style="max-width:800px">
<h2 style="text-align:center">가성비 PC 견적서</h2>
<table id="myTable">
<tr>
<th>분류</th>
<th>상품명</th>
<th>수량</th>
<th>가격</th>
</tr>
</table>
<p><span id="total"></span></p>
</div>
<script>
var products = [
{ component: "CPU", selection: "AMC 라이즈5 36000", ea: 1, price: 230000, url: "" },
{ component: "메인보드", selection: "SPooo B450 Pro Gaming", ea: 1, price: 125000, url:
"https://spooohome.blogspot.com" },
{ component: "메모리", selection: "삼미전자 DDR7-5600 8GB", ea: 2, price: 44000, url: "" },
{ component: "그래픽", selection: "ASIS G4-1030 D5 2GB", ea: 1, price: 112000, url: "" },
{ component: "SSD", selection: "SPooo Vital MX500 500GB", ea: 1, price: 72000, url:
"https://spooohome.blogspot.com/2021/04/html-canvas_19.html" },
{ component: "케이스", selection: "NIX 철제 튼튼한 케이스", ea: 1, price: 30000, url: "" },
{ component: "파워", selection: "시소 S12 Bronze SS-650", ea: 1, price: 75000, url: "" },
// { component: "", selection: "", ea: 1, price: 0, url: "" },
];
function makeTr(obj) {
var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerHTML = obj.component;
tr.appendChild(td);
td = document.createElement("td");
if (obj.url) td.innerHTML =
`<a href='${obj.url}' target='_blank'>${obj.selection}</a>`;
else td.innerHTML = obj.selection;
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = obj.ea;
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = obj.price.toLocaleString();
if (obj.ea > 1) td.innerHTML += ' x' + obj.ea;
tr.appendChild(td);
return tr;
}
function setTable() {
var table = document.getElementById("myTable");
var total = 0;
for (var obj of products) {
table.appendChild(makeTr(obj));
total += obj.price * obj.ea;
}
document.getElementById("total").innerHTML = "합계: " +
total.toLocaleString() + " 원";
}
setTable();
</script>