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

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

소스 코드

<!DOCTYPE html>
<meta charset="utf-8" />
<title>테이블 행 추가/삭제[</title>

<style type="text/css">  
table { border-collapse:collapse; } 
th, td { border:1px solid #000000; }
</style>

<form name="form1" method="post" action="">
<input type="button" value="행 추가하기" onclick="addrow()">
<input type="button" value="행 삭제하기" onclick="delrow()">
</form>

<table id="mytable">
<th colspan="3">테이블 제목</th>
</table>

<script>
function addrow() {
	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 delrow() {
	mytable = document.getElementById('mytable');
	if(mytable.rows.length < 1) return;
	mytable.deleteRow(mytable.rows.length-1);
}
</script>

예제: http://jmnote.com/js/dynamic_table.php