• 회원가입
  • 로그인
  • 구글아이디로 로그인

[JS-서기] JS 8강 - for문 안쪽에 if문 사용 (= 행렬 표만들기 = 줄바꿈 = 줄바꾸기 = 줄변경 = 라인변경)

3,478  

예제1 - table 구문


<style>

table,

tr,

td {border:1px solid red; border-collapse:collapse; padding:10px;}
</style>


<table>

<tr>

<script>

for(i=1; i<=100; i++) {

     document.write('<td>' + i + '</td>');

     if(i%4 == 0) {

         document.write('</tr>');

     }

}

</script>

</table>



결과 보기

 

 

 

예제2 - div 구문

 

<style>

.hz {float:left; border:1px solid red; width:30px; line-height:30px; text-align:center;}

.br {clear:left; border:1px solid blue;}

</style>


<script>

for(i=1; i<=100; i++) {

     br = (i%4 == 1) ? 'br' : '';

     document.write('<div class="hz ' + br + '">' + i + '</div>');

}

</script>



결과 보기



분류 제목
JS-생코 JS 86강 - 상속 (2/3) : 상속의 사용방법
JS-생코 JS 85강 - 상속 (1/3) : 상속이란?
JS-생코 JS 84강 - this (5/5) : apply와 this
JS-생코 JS 83강 - this (4/5) : 객체로서 함수
JS-생코 JS 82강 - this (3/4) : 생성자와 this
JS-생코 JS 81강 - this (2/5) : 메소드와 this
JS-생코 JS 80강 - this (1/5) : 함수와 this
JS-생코 JS 79강 - 전역객체
JS-생코 JS 78강 - 생성자와 new (3/3) : 생성자와 new
JS-생코 JS 77강 - 생성자와 new (2/3) : 객체생성
JS-생코 JS 76강 - 생성자와 new (1/3) : 소개
JS-생코 JS 75강 - 객체지향프로그래밍 (3/3) : 부품화
JS-생코 JS 74강 - 객체지향프로그래밍 (2/3) : 추상화
JS-생코 JS 73강 - 객체지향프로그래밍 (1/3) : 오리엔테이션
JS-생코 JS 72강 - 함수의 호출 (2/2) : apply의 사용
JS-생코 JS 71강 - 함수의 호출 (1/2) : apply 소개
JS-생코 JS 70강 - arguments (2/2) : function length
JS-생코 JS 69강 - arguments (1/2) : arguments란?
JS-생코 JS 68강 - 클로저 (closure) 4/4 : 클로저의 응용
JS-생코 JS 67강 - 클로저 (closure) 3/4 : private variable
23/35
목록
찾아주셔서 감사합니다. Since 2012