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

테이블 tr 추가하기

자바스크립트 table 행 추가

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

1 소스 코드

• 예제: http://jmnote.com/js/dynamic-table.php

<button onclick="add_row()">행 추가하기</button>
<button onclick="delete_row()">행 삭제하기</button>

<table id="mytable" border="2" cellspacing="0">
<th colspan="2">테이블 헤더</th>
</table>

<script>
function add_row() {
  mytable = document.getElementById('mytable');
  row = mytable.insertRow(mytable.rows.length);
  cell1 = row.insertCell(0);
  cell2 = row.insertCell(1);
  cell1.innerHTML = '항목';
  cell2.innerHTML = '<input type="text" name="strs[]"/>';
}
function delete_row() {
  mytable = document.getElementById('mytable');
  if(mytable.rows.length < 2) return;
  mytable.deleteRow(mytable.rows.length-1);
}
</script>

2 같이 보기

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