자바스크립트 테이블 행/셀 동적 추가 예제(Dynamic Table Row/Cell Addition Example with JavaScript)

자바스크립트로 HTML 동적 테이블 행 추가/삭제 강좌 (VSCode 스타일)

아래는 버튼 클릭으로 테이블 행과 셀을 동적으로 추가 및 삭제하는 실전 예제입니다.
순수 자바스크립트만으로 구현했으며 소스 설명을 단계별로 안내합니다.

---

1단계: HTML 테이블 및 '행 추가' 버튼 만들기

테이블(<table>)과 '행 추가' 버튼의 기본 구조입니다.
<thead>에는 제목 행, <tbody>에는 데이터 행이 동적으로 들어갑니다.

<table id="myTable">
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>삭제</th>
    </tr>
  </thead>
  <tbody>
    <!-- 동적으로 행이 생성됨 -->
  </tbody>
</table>

<button id="addRowBtn">행 추가</button>

---

2단계: CSS로 테이블과 버튼 스타일링 (VSCode 분위기 UP!)

간결하고 보기 좋은 VSCode 풍 CSS를 적용합니다.

table { border-collapse: collapse; width: 60%; margin-bottom: 20px; }
th, td { border: 1px solid #444; padding: 8px; text-align: center; }
.add-btn { background: #2980b9; color: #fff; border: none; border-radius: 3px; padding: 6px 14px; cursor: pointer; }
.del-btn { background: #e74c3c; color: #fff; border: none; border-radius: 3px; padding: 4px 10px; cursor: pointer; }

---

3단계: 자바스크립트로 행과 삭제 버튼 동적으로 추가/삭제

아래 코드는 '행 추가' 버튼 클릭 시
- 이름, 나이 입력란과 '삭제' 버튼이 포함된 행을 동적으로 생성
- '삭제' 버튼 클릭 시 해당 행만 삭제합니다.

document.addEventListener('DOMContentLoaded', function() {
  var addRowBtn = document.getElementById('addRowBtn');
  var tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0];

  addRowBtn.addEventListener('click', function() {
    var newRow = document.createElement('tr');

    // 이름 입력 셀
    var tdName = document.createElement('td');
    var inputName = document.createElement('input');
    inputName.type = 'text';
    inputName.placeholder = '이름 입력';
    inputName.style.width = '95%';
    tdName.appendChild(inputName);
    newRow.appendChild(tdName);

    // 나이 입력 셀
    var tdAge = document.createElement('td');
    var inputAge = document.createElement('input');
    inputAge.type = 'number';
    inputAge.placeholder = '나이';
    inputAge.style.width = '80%';
    inputAge.min = 0;
    inputAge.max = 120;
    tdAge.appendChild(inputAge);
    newRow.appendChild(tdAge);

    // 삭제 버튼 셀
    var tdDelete = document.createElement('td');
    var delBtn = document.createElement('button');
    delBtn.textContent = '삭제';
    delBtn.className = 'del-btn';
    delBtn.addEventListener('click', function() {
      tableBody.removeChild(newRow);
    });
    tdDelete.appendChild(delBtn);
    newRow.appendChild(tdDelete);

    tableBody.appendChild(newRow);
  });
});

---

4단계: 전체 결과 예시 (동작 미리보기)

아래는 완성된 테이블 UI 미리보기입니다.
코드를 합쳐서 붙여넣으면 블로그에서도 바로 동작합니다.

<style>
table { border-collapse: collapse; width: 60%; margin-bottom: 20px; }
th, td { border: 1px solid #444; padding: 8px; text-align: center; }
.add-btn { background: #2980b9; color: #fff; border: none; border-radius: 3px; padding: 6px 14px; cursor: pointer; }
.del-btn { background: #e74c3c; color: #fff; border: none; border-radius: 3px; padding: 4px 10px; cursor: pointer; }
</style>

<table id="myTable">
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>삭제</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<button class="add-btn" id="addRowBtn">행 추가</button>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var addRowBtn = document.getElementById('addRowBtn');
  var tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0];

  addRowBtn.addEventListener('click', function() {
    var newRow = document.createElement('tr');

    var tdName = document.createElement('td');
    var inputName = document.createElement('input');
    inputName.type = 'text';
    inputName.placeholder = '이름 입력';
    inputName.style.width = '95%';
    tdName.appendChild(inputName);
    newRow.appendChild(tdName);

    var tdAge = document.createElement('td');
    var inputAge = document.createElement('input');
    inputAge.type = 'number';
    inputAge.placeholder = '나이';
    inputAge.style.width = '80%';
    inputAge.min = 0;
    inputAge.max = 120;
    tdAge.appendChild(inputAge);
    newRow.appendChild(tdAge);

    var tdDelete = document.createElement('td');
    var delBtn = document.createElement('button');
    delBtn.textContent = '삭제';
    delBtn.className = 'del-btn';
    delBtn.addEventListener('click', function() {
      tableBody.removeChild(newRow);
    });
    tdDelete.appendChild(delBtn);
    newRow.appendChild(tdDelete);

    tableBody.appendChild(newRow);
  });
});
</script>

---

5단계: 실무 팁

• 각 입력란의 값 검증이나, 행 추가 시 기본값 지정 등도 추가 코딩으로 쉽게 구현할 수 있습니다.
• 동적 tr 추가 패턴은 ASP.NET, WPF의 DataGrid 컨트롤 동작과 매우 유사합니다.
• React, Vue, Node.js 등 프레임워크와도 이 구조를 쉽게 연계할 수 있습니다.