구구단 표 만들기
html에 1단부터 9단까지 81개의 숫자를 일일이 써서 테이블을 만들 수 있지만, 이 방법은 너무 오래걸리고 실수가 생길 염려가 있습니다. 이럴 때는 구구단의 규칙을 이용해서 테그의 엘리먼트들을 동적으로 생성해서 표를 만들 수 있습니다. document.createElement() 라는 함수에 테그의 이름을 인자로 넘기면 하나의 엘리먼트를 리턴하고 객체 인스턴스를 추가하고 싶은 엘리먼트에 .appendChild() 메소드를 호출하여 넘겨주면 우리가 생성한 엘리먼트가 자식으로 들어가게 됩니다. html이 아닌 javascript로도 테그를 생성하고, 테그들 간의 위계관계도 조정할 수 있다는 사실을 기억하시기 바랍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript 코드 분리하기</title>
</head>
<body>
<div>
<h1>구구단 표 입니다.</h1>
</div>
<table id='gugudan'></table>
<script>
var gugudan = document.getElementById('gugudan');
console.log(gugudan);
for( var i=1; i<10; i++ ){
var row = document.createElement('tr');
gugudan.appendChild(row);
for(var j=1 ; j<10 ; j++){
var cell = document.createElement('td');
cell.innerHTML = i*j;
row.appendChild(cell);
}
}
</script>
</body>
</html>
'Languages > 자바스크립트' 카테고리의 다른 글
| javascript 파일 분리하기 (0) | 2019.01.24 |
|---|---|
| 자바스크립트로 HelloWorld 브라우저에 띄우기 (0) | 2019.01.24 |
