Daily coding

Java Script : 예제8 - element 생성해서 테이블 만들기 본문

Front-end/Java Script

Java Script : 예제8 - element 생성해서 테이블 만들기

sunnnkim 2020. 1. 9. 20:00 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
	width: 50%;
}
</style>
</head>
<body>
<h1>단가 x 수량 일람표</h1>

<table border="1" id="tb">
<tr>
	<th>개수</th>
	<th>제품A</th>
	<th>제품B</th>
	<th>상품C</th>
</tr>

</table>

<script type="text/javascript">
 for (var i = 1; i <= 10; i++) {
	 	// th태그 만들기
		var thtag = document.createElement("th");	
		thtag.innerHTML = i;
		
		// td태그 만들기
		var td1 = document.createElement("td");	
		td1.innerHTML = 300*i +"원";
		var td2 = document.createElement("td");	
		td2.innerHTML = 450*i +"원";
		var td3 = document.createElement("td");	
		td3.innerHTML = 520*i +"원";
		
		// tr태그 만들고 th,td를 tr에 추가하기
		var trtag = document.createElement("tr");
		trtag.appendChild(thtag);
		trtag.appendChild(td1);
		trtag.appendChild(td2);
		trtag.appendChild(td3);
		
		// 새로운 테이블 만들어 기존 테이블(id="tb")에 데이터 추가하기
		var table = document.createElement("table");
		tb.appendChild(trtag);

 }


	

</script>

</body>
</html>

'Front-end > Java Script' 카테고리의 다른 글

Java Script : 예제10 - select 태그로 링크 이동 및 외부 이미지 끌어오기  (0) 2020.01.09
Java Script : 예제9 - 포털사이트 링크 연결하기  (0) 2020.01.09
Java Script : 예제7 - 테이블 및 배열로 계산하기  (0) 2020.01.09
Java Script : 예제6 - 마우스이벤트(onmouseover)  (0) 2020.01.09
Java Script : 예제5 - 현재 시간 출력하기  (0) 2020.01.09
'Front-end/Java Script' Related Articles more