Javascript를 사용하여 동적으로 테이블을 생성하고, 열을 추가하는 방법에 대해서 알아보겠습니다.

동적으로 테이블 생성하기

버튼을 누르면 동적으로 테이블을 생성하는 예제입니다.

HTML

버튼을 누르면 createTableButton() 함수를 실행하고, 함수에서는 동적으로 테이블을 생성하여 tableContainer에 추가하려고 합니다.

<button id="createTableButton">테이블 생성</button>
<div id="tableContainer"></div>

Javascript

버튼 클릭 이벤트를 받으면, 동적으로 테이블을 생성합니다.

동적으로 생성된 테이블의 HTML 코드를 보면 아래와 같이 보입니다. <table>아래에는 행을 의미하는 <tr>이 있고, <tr> 아래에는 Cell을 의미하는 <td>가 있습니다. 그리고 헤더를 출력하고 싶으면, <table> 하위의 첫번째 <tr>에 <th>로 입력할 수 있습니다.

<div id="tableContainer">
  <table border="1">
    <tr> <!-- row (header) -->
      <th>이름</th>
      <th>나이</th>
      <th>직업</th>
    </tr>

    <tr> <!-- 1행 (header) -->
      <td>민지</td>
      <td>25</td>
      <td>개발자</td>
    </tr>

    <tr> <!-- 2행 (header) -->
      <td>하니</td>
      <td>30</td>
      <td>디자이너</td>
    </tr>

    <tr> <!-- 3행 (header) -->
      <td>혜인</td>
      <td>22</td>
      <td>마케터</td>
    </tr>
  </table>
</div>

위 테이블은 아래의 Javascript 코드로 생성되는데, 코드를 보면, <table> element를 만들고, <tr>, <th>, <td> element들을 만듭니다. 그리고 위에서 본 구조와 동일하게 요소들을 추가합니다.

  • createElement(element) : element 객체 생성
  • a.appendChild(b) : a 요소에 b 요소를 추가
document.getElementById("createTableButton").addEventListener("click", function() {
    // 테이블 생성
    var table = document.createElement("table");
    table.border = "1";

    // 테이블 헤더 생성
    var headerRow = document.createElement("tr");
    var headers = ["이름", "나이", "직업"];
    for (var i = 0; i < headers.length; i++) {
        var headerCell = document.createElement("th");
        headerCell.textContent = headers[i];
        headerRow.appendChild(headerCell);
    }
    table.appendChild(headerRow);

    // 데이터 정의
    var data = [
        { name: "민지", age: 25, job: "개발자" },
        { name: "하니", age: 30, job: "디자이너" },
        { name: "혜인", age: 22, job: "마케터" }
    ];

    // 데이터를 테이블에 추가
    for (var i = 0; i < data.length; i++) {
        var dataRow = document.createElement("tr");
        var dataCell1 = document.createElement("td");
        var dataCell2 = document.createElement("td");
        var dataCell3 = document.createElement("td");

        dataCell1.textContent = data[i].name;
        dataCell2.textContent = data[i].age;
        dataCell3.textContent = data[i].job;

        dataRow.appendChild(dataCell1);
        dataRow.appendChild(dataCell2);
        dataRow.appendChild(dataCell3);

        table.appendChild(dataRow);
    }

    // 테이블을 페이지에 추가
    var tableContainer = document.getElementById("tableContainer");
    tableContainer.innerHTML = ""; // 기존 내용 비우기
    tableContainer.appendChild(table);
});