for, if문 활용

테이블 만들기

 HTML에서 만들 수 있는 테이블을 Javascript의 for문과 if문을 사용해서 어떻게 만들 수 있는지

한번 알아보도록 하겠습니다.

테이블 예시

 

 

HTML로 테이블 만들기

<table border=1>
    <tr>
        <td style="color:blue">1</td>
        <td style="color:red">2</td>
        <td style="color:blue">3</td>
        <td style="color:red">4</td>
        <td style="color:blue">5</td>
    </tr>
    <tr>
        <td style="color:red">6</td>
        <td style="color:blue">7</td>
        <td style="color:red">8</td>
        <td style="color:blue">9</td>
        <td style="color:red">10</td>
    </tr>
    <tr>
        <td style="color:blue">11</td>
        <td style="color:red">12</td>
        <td style="color:blue">13</td>
        <td style="color:red">14</td>
        <td style="color:blue">15</td>
    </tr>
    <tr>
        <td style="color:red">16</td>
        <td style="color:blue">17</td>
        <td style="color:red">18</td>
        <td style="color:blue">19</td>
        <td style="color:red">20</td>
    </tr>
    <tr>
        <td style="color:blue">21</td>
        <td style="color:red">22</td>
        <td style="color:blue">23</td>
        <td style="color:red">24</td>
        <td style="color:blue">25</td>
    </tr>
</table>

 HTML에서 테이블을 만드는 법은 위 사진과 같습니다.

한 개의 <tr></tr>태그에 각각 <td></td>태그 다섯 개를 넣어주고,

홀수는 파란색의 스타일태그를, 짝수는 빨간색의 스타일태그를 넣어주면 됩니다.

 

 

---

 

Javascript For, If 문으로 테이블 만들기

let table = "<table border=1>"
let num = 1;

for(let i=1; i<=5; i++){
    table += "<tr>"
    for(let j=1; j<=5; j++){
        if(num % 2 == 0){
            table += "<td style='color:red'>" + num + "</td>"
        } else {
            table += "<td style='color:blue'>" + num + "</td>"
        }
        num++
    }
    table += "</tr>"
}
table += "</table>"
document.write(table);

javascript 테이블 해석

 Javascript에서 for문과 if문을 사용해서 테이블을 출력하는 방법입니다.

for문을 이용해 각 <tr>태그를 다섯 번 반복하고,

각각의 <tr>태그에 다시 <td>태그를 다섯 번 반복하는 for문을 넣어줘 테이블의 틀을 출력할 수 있습니다.

총 25번을 반복하는 <td>태그에 변수 num이 1씩 증가하는 증감식을 넣어주면

<td>의 반복에 따라 숫자가 증가하는 num을 만들 수 있습니다.

 

Tip !

 if문을 넣어 num이 짝수 인지 홀수인지 조건을 통해 구별할 수 있고,

짝수에 빨간색을, else를 통해 짝수가 아닌 부분에 파란색을 넣어줄 수 있습니다.

 

 

 

이렇게 해서 같은 테이블을 HTML의 태그를 이용하여, Javascript를 이용하여 만들어 보았습니다 !