<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language='javascript'>
var i=4;
function addRow(){
var tb=document.getElementById('tb');
var insert=tb.insertRow(i+1);
i++;
var num_="<th><input type='hidden' value="+i+" name='var_num_"+i+"'/>"+i+" </th>";
insert.insertCell().innerHTML=num_;
var rname_="<td><input type='text' value='' name='var_rname_"+i+"'/></td>";
insert.insertCell().innerHTML=rname_;
var name_="<td><input type='text' value='' name='var_name_"+i+"'/></td>";
insert.insertCell().innerHTML=name_;
}
function deleteRow(){
if(i==0){
alert('더이상 삭제할 수 없습니다');
return;
}
var tb=document.getElementById('tb');
tb.deleteRow();
i--;
}
</script>
</head>
<body>
<form name='input_fo' method='get' action="output">
<table id='tb' border='1'>
<tr bgcolor='skyblue'>
<th>번호</th>
<th>이름</th>
<th>나이</th>
</tr>
<%for(int i=1;i<5;i++){%>
<tr>
<th><input type='hidden' value=<%=i%> name='var_num_<%=i%>'/><%=i%> </th>
<td><input type='text' value='' name='var_rname_<%=i%>'/></td>
<td><input type='text' value='' name='var_name_<%=i%>'/></td>
<%}%>
</table>
<input type='button' name='fieldAdd' value="필드추가(+1)" onClick="addRow()"/>
<input type='button' name='fieldDel' value="필드제거(-1)" onClick="deleteRow()"/><br>
</form>
</body>
</html>
테이블에는 번호 이름 나이를 html코드로 생성 하였고 이후 script로 함수를 만들어서 이 테이블의 행과열을 추가 및 제거를 하도록 만들었습니다.
댓글