Javascript를 이용하여 Table에 행 1개를 추가하거나, 삭제하는 방법을 알아보겠습니다.

1. 행(row) 추가

HTML

테이블이 있고, 2개의 버튼이 있습니다. 버튼을 누르면 각각의 Javascript 함수가 실행되며, 맨 앞에 행을 추가하거나, 맨 뒤에 행을 추가합니다.

<table id="myTable" border="1">
  <tr>
    <td>민지</td>
    <td>하니</td>
  </tr>
  <tr>
    <td>해린</td>
    <td>혜인</td>
  </tr>
  <tr>
    <td>다니엘</td>
    <td>뉴진스</td>
  </tr>
</table>

<button onclick="addRow(this)">맨 앞에 행 추가</button>
<button onclick="addRowToLast(this)">맨 뒤에 행 추가</button>

Javascript

아래 코드에서 addRow()는 맨 앞에 행을 추가하며 addRowToLast()는 맨 뒤에 행을 추가합니다.

  • document.getElementById('myTable') : 테이블 요소 가져옴
  • table.insertRow(0) : 는 테이블의 맨 앞에 행을 추가하며, 행의 요소가 리턴
  • newRow.insertCell(0) : 1열의 셀을 추가하며 요소를 리턴, 리턴된 요소의 innerHTML로 text를 입력할 수 있음.
  • newRow.insertCell(1) : 2열의 셀을 추가하며 요소를 리턴
function addRow() {
    const table = document.getElementById('myTable');
    var newRow = table.insertRow(0);
    var cell1 = newRow.insertCell(0); // 1열의 셀 추가
    var cell2 = newRow.insertCell(1); // 2열의 셀 추가

    cell1.innerHTML = "뉴진스1";
    cell2.innerHTML = "뉴진스2";
}

function addRowToLast() {
    const table = document.getElementById('myTable');
    var newRow = table.insertRow();
    var cell1 = newRow.insertCell(0); // 1열의 셀 추가
    var cell2 = newRow.insertCell(1); // 2열의 셀 추가

    cell1.innerHTML = "뉴진스1";
    cell2.innerHTML = "뉴진스2";
}

2. 행(row) 삭제

HTML

테이블이 있으며, 두개의 버튼이 있습니다. 버튼을 누르면 각각의 Javascript 함수가 실행되며, 첫번째 행을 삭제하거나 마지막 행을 삭제합니다.

<table id="myTable" border="1">
  <tr>
    <td>민지</td>
    <td>하니</td>
  </tr>
  <tr>
    <td>해린</td>
    <td>혜인</td>
  </tr>
  <tr>
    <td>다니엘</td>
    <td>뉴진스</td>
  </tr>
</table>

<button onclick="deleteFirstRow(this)">첫번째 행 삭제</button>
<button onclick="deleteLastRow(this)">마지막 행 삭제</button>

Javascript

deleteFirstRow()는 첫번째 행을 삭제하며, deleteLastRow()는 마지막 행을 삭제합니다.

  • document.getElementById('myTable') : 테이블 요소 가져옴
  • table.deleteRow(0) : 첫번째 행 삭제
  • table.deleteRow(-1) : 마지막 행 삭제
function deleteFirstRow() {
    const table = document.getElementById('myTable');
    table.deleteRow(0);
}

function deleteLastRow() {
    const table = document.getElementById('myTable');
    table.deleteRow(-1);
}