06. 새로운 요소 추가하기

728x90

06. 새로운 요소 추가하기

다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.

1. 행과 열의 개수를 입력한 값에 따라 표를 그리는 프로그램을 작성한다.

2. table 요소 노드를 만든다.

3. 입력한 행의 개수만큼 반복하면서 tr 요소 노드를 만든다.

4. 입력한 열이 개수만큼 다음 과정을 반복한다.

- td 요소 노드를 만든다.

- 텍스트 노드를 만든다.

- 텍스트 노드를 td 요소 노드의 자식 노드로 만든다.

- td 요소 노드를 tr 요소 노드의 자식 노드로 만든다.

5. tr 요소 노드를 table 요소 노드의 자식 노드로 만든다.

6. table 요소 노드를 필요한 위치에 추가한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JAVA SCRIPT 문제 6</title>
  <style>
    form {
      margin-bottom: 30px;
    }
    input[type="text"] {
      width: 30px;
      height: 20px;
      text-align: center;
    }
    button {
      margin-left: 10px;
    }
    table {
      width: 300px;
    }
    table,
    td {
      border: 1px solid #ccc;
      border-collapse: collapse;
      }
    td {
      padding: 10px;
    }
  </style>
  </head>
  <body>
    <form>
      <input type="text" id="rCount" value="1" />행
      <input type="text" id="cCount" value="1" />열
      <button onclick="drawTable(); return false;">작성</button>
    </form>
    <div id="contents"></div>
    <script>

      // 코드를 작성하세요
      
    </script>
  </body>
</html>

결과 화면

A. 해설

1. 행과 열의 개수를 입력한 값에 따라 표를 그리는 프로그램을 작성한다.

2. table 요소 노드를 만든다.

--> document.createElement("table") 를 변수 table 에 넣는다.

3. 입력한 행의 개수만큼 반복하면서 tr 요소 노드를 만든다.

--> 1번 for 문을 사용하여 rCount 값 만큼 반복하여 document.createElement("tr") 를 변수 tr 에 넣는다.

4. 입력한 열이 개수만큼 다음 과정을 반복한다.

--> 1번 for 문 안에 2번 for 문을 사용하여 cCount 값 만큼 반복한다.

- td 요소 노드를 만든다.

--> 2번 for 문 안에 document.createElement("td") 를 변수 td 에 넣는다.

- 텍스트 노드를 만든다.

--> 2번 for 문 안에 document.createElement("tdText") 를 변수 tdText 에 넣는다.

- 텍스트 노드를 td 요소 노드의 자식 노드로 만든다.

--> 2번 for 문 안에 td.appendChild(tdText) 를 작성한다.

- td 요소 노드를 tr 요소 노드의 자식 노드로 만든다.

--> 2번 for 문 안에 tr.appendChild(td) 를 작성한다.

5. tr 요소 노드를 table 요소 노드의 자식 노드로 만든다.

--> 1번 for 문 안에 table.appendChild(tr) 를 작성한다.

6. table 요소 노드를 필요한 위치에 추가한다.

--> document.querySelector("#contents") 를 변수 contents 에 넣고, contents.appendChild(table) 를 작성한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JAVA SCRIPT 문제 6</title>
  <style>
    form {
      margin-bottom: 30px;
    }
    input[type="text"] {
      width: 30px;
      height: 20px;
      text-align: center;
    }
    button {
      margin-left: 10px;
    }
    table {
      width: 300px;
    }
    table,
    td {
      border: 1px solid #ccc;
      border-collapse: collapse;
      }
    td {
      padding: 10px;
    }
  </style>
  </head>
  <body>
    <form>
      <input type="text" id="rCount" value="1" />행
      <input type="text" id="cCount" value="1" />열
      <button onclick="drawTable(); return false;">작성</button>
    </form>
    <div id="contents"></div>
    <script>
      function drawTable() {
        var rCount = document.querySelector("#rCount").value;
        var cCount = document.querySelector("#cCount").value;

        var table = document.createElement("table");
        for (i = 0; i < rCount; i++) {
          var tr = document.createElement("tr");
          for (j = 0; j < cCount; j++) {
            var td = document.createElement("td");
            var tdText = document.createTextNode(i + ", " + j);
            td.appendChild(tdText);
            tr.appendChild(td);
          }
          table.appendChild(tr);
        }
        var contents = document.querySelector("#contents");
        contents.appendChild(table);
      }
    </script>
  </body>
</html>

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)

728x90

'💠문제 풀이 > JavaScript 문제 풀이' 카테고리의 다른 글

05. DOM 에 접근하기 (0)	2022.08.29
04. 자바스크립트의 내장 객체를 사용한 문제 II (0)	2022.08.24
03. 자바스크립트의 내장 객체를 사용한 문제 I (0)	2022.08.23
02. 함수 선언하고 호출하는 문제 II (0)	2022.08.16
01. 함수 선언하고 호출하는 문제 I (0)	2022.08.16