[JavaScript] 동적으로 테이블 만들기

내가 입력하고싶은 데이터보다도 테이블의 컬럼이 많다면 남는 칼럼들은 그냥 공간만 차지할 뿐입니다. 하지만 데이터만큼 테이블의 Row가 동적으로 생성된다면?? 이 기능은 자바스크립트의 appendChild함수를 이용해 구현할 수 있습니다. 이번 포스팅에서는 자신이 입력하고있는 데이터만큼의 테이블 Row를 자바스크립트를 사용해 동적으로 생성하는 방법에 대해 알아보도록 하겠습니다.


동적으로 테이블 만들기 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>동적으로 테이블 만들기</title>
<script language = "javascript">
  function makeFriends(){
	var myFriends = window.prompt("친구가 몇 명인가요?","");
		
	for(var i=0;i<parseInt(myFriends);i++){
	  var textBox = document.createElement("input");
	  var newLine = document.createElement("br");
	  textBox.type = "text"
			
	  document.body.appendChild(textBox);
	  document.body.appendChild(newLine);
	}
  }
</script>
</head>
<body onload="makeFriends()">
<h2>내 친구 나열하기</h2>

</body>
</html>

동적

테이블

자신이 입력한 친구의 숫자에 따라 테이블이 동적으로 생성됩니다. 예제를 다양하게 응용해서 활용해 보세요.


[JavaScript] 자바스크립트란 무엇인가?

[JavaScript] 자바스크립트 배열 선언 및 사용법 총정리

[JavaScript] 라디오버튼 클릭시 원하는 배경색으로 바꾸기

[JavaScript] Span태그의 속성(글꼴,색상,크기,스타일) 변경하기


댓글(0)

Designed by JB FACTORY