[JavaScript] 동적으로 테이블 만들기
- Web/JavaScript
- 2018. 7. 8.
내가 입력하고싶은 데이터보다도 테이블의 컬럼이 많다면 남는 칼럼들은 그냥 공간만 차지할 뿐입니다. 하지만 데이터만큼 테이블의 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] 자바스크립트 배열 선언 및 사용법 총정리
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] HTML에서 자바스크립트(.js) 파일 사용하기 (3) | 2024.02.05 |
|---|---|
| [JavaScript] 방문할때마다 랜덤으로 변하는 이미지 구현하기 (2) | 2018.07.09 |
| [JavaScript] 라디오버튼 클릭시 원하는 배경색으로 바꾸기 (0) | 2018.07.07 |
| [JavaScript] Alert(경고창), Prompt(입력창), Confirm(선택창) (2) | 2018.07.06 |