자바스크립트 HTML 테이블 행 추가/삭제

1 개요

테이블 tr 추가하기

JavaScript 테이블 행 추가

자바스크립트 table 행 추가

HTML 테이블 행 추가/삭제하기

• table 내에 thead와 tbody 영역으로 나누어 tbody의 rows에 행 추가

2 예시

html

Copy

<style>  
table { border-collapse:collapse; }  
th, td { border:1px solid gray; }
</style>

<button onclick="add_row()">행 추가하기</button>
<button onclick="delete_row()">행 삭제하기</button>
<hr>
<table>
  <thead>
    <th>item</th>
    <th>datetime</th>
  </thead>
  <tbody id="my-tbody"></tbody>
</table>

<script>
  function add_row() {
    var my_tbody = document.getElementById('my-tbody');
    // var row = my_tbody.insertRow(0); // 상단에 추가
    var row = my_tbody.insertRow( my_tbody.rows.length ); // 하단에 추가
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = 'HELLO world';
    cell2.innerHTML = new Date().toUTCString();
  }

  function delete_row() {
    var my_tbody = document.getElementById('my-tbody');
    if (my_tbody.rows.length < 1) return;
    // my_tbody.deleteRow(0); // 상단부터 삭제
    my_tbody.deleteRow( my_tbody.rows.length-1 ); // 하단부터 삭제
  }
</script>

3 같이 보기

• jQuery 테이블 행 추가/삭제
• getElementById()
• HTML table 태그