Javascript [ 주문서 ]

JS 에서 HTML 넣기

let html = `<table id='tbl'>
				<thead>
					<tr>
						<th colspan='4'>제품선택/th>
					</tr>
					<tr>
						<th width='22%'>제품사진</th>
						<th width='30%'>제품정보</th>
						<th width='33%'>부속품</th>
						<th width='15%'>주문금액</th>
					</tr>
				</thead>
				<tbody>`;

배열명.forEach(item => {
	html += `<tr>
				<td>
					<img src="images/${item.image}" />
				</td>
				<td>
					<ul>
						<li>
							<label>제품명 : </label>
							${item.필드명}
						</li>
						<li>
							<label>가격 : </label>
		<span>${item.price.toLocaleString('en')}</span>
						</li>
						<li>
							<label>주문수량 : </label>
		<input type='number' min='0' max='20' value='0'/>
						</li>
					</ul>
				</td>
				<td>`;
  	item.option.forEach(elt => {
    	html += `<label for='${elt.optionId}'>
				${elt.optionName}
				</label>
	<input type='checkbox' name='option_${item.productId}'
	value='${elt.price}' id='${elt.optionId}'/>`;
    }	// end of forEach--------------
    html += `</td>
			<td id='${item.productId}'></td>
            </tr>`;
	})	// end of item.option.forEach(elt => {}-------
html += `</tbody>
		<tfoot>
			<tr>
				<td colspan='3'>주문총액</td>
				<td>0</td>
			</tr>
		</tfoot>
		</table>`;
document.querySelector("넣을위치").innerHTML = html;

---

팝업창 띄우기

window.open("팝업주소","팝업이름","속성")
// window.open(URI, name, specs, replace)
// specs 를 작성하지 않을 시 tab 으로 열린다.
// => 속성 창의 크기, 스크롤 여부, 리사이즈

---

정리

• 13_popup_calculator
  -> popup_calculator.html, popup_calculator.css, popup_calculator.js, popup_contents.html