table의 행과 열을 추가 시켜주는 jsp 페이지 입니다.
스크립트를 이용해 함수를 만들고 버튼으로 함수를 실행시키도록 하였습니다.
코드입니다.
|
rowColumn.jsp |
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<title>행렬 추가, 제거</title>
</head>
<table id='tb' border=1>
<thead id='tbhead'>
<tr>
<td><input type=text name=txtbox></td>
<td><input type=text name='txtbox[]'></td>
</tr>
</thead>
<tbody id='tbbody'>
<tr>
<td><input type=text name='txtboxb[]'></td>
<td><input type=text name='txtboxb[0][]'></td>
</tr>
</tbody>
</table>
<input type=button value="행추가하기" onclick="add_row();">
<input type=button value="열추가하기" onclick="add_col();">
<input type=button value="행삭제하기" onclick="delete_row();">
<input type=button value="열삭제하기" onclick="delete_column();">
<script>
var tb = document.getElementById('tb');
var tbhead = document.getElementById('tbhead');
var tbbody = document.getElementById('tbbody');
var tr = null;
var td = null;
var x = 0;
var y = 0;
var msg = document.getElementById('msg');
function add_row() {//행추가
tr = document.createElement('tr');
tbbody.appendChild(tr);
td = document.createElement('td');
tr.appendChild(td);
insertTN('txtboxb[]');
y++;
// 행의 열추가
var tbhead_td = tbhead.getElementsByTagName('td');
for (i = 0; i < tbhead_td.length - 1; i++) {
td = document.createElement('td');
tr.appendChild(td);
insertTN('txtboxb[' + y + '][]');
}
}
function add_col() { //열추가
var tbhead_tr = tbhead.getElementsByTagName('tr');
td = document.createElement('td');
tbhead_tr[0].appendChild(td);
insertTN('txtbox[]');
var tbbody_tr = tbbody.getElementsByTagName('tr');
for (i = 0; i < tbbody_tr.length; i++) {
td = document.createElement('td');
tbbody_tr[i].appendChild(td);
insertTN('txtboxb[' + i + '][]');
}
}
function insertTN(name) { //텍스트박스 타입과 이름 집어넣기
var inpu = document.createElement('input');
inpu.setAttribute('type', 'text');
inpu.setAttribute('name', name);
td.appendChild(inpu);
}
function delete_row() {//행제거
var tbbody_tr = tbbody.getElementsByTagName('tr');
if (tbbody_tr.length > 1) {
tbbody.deleteRow(tbbody_tr.length - 1);
y--;
}
}
function delete_column() {//열제거
var tbhead_tr = tbhead.getElementsByTagName('tr');
var tbhead_td = tbhead.getElementsByTagName('td');
if (tbhead_td.length > 2) {
tbhead_tr[0].deleteCell(tbhead_td.length - 1);
var tbbody_tr = tbbody.getElementsByTagName('tr');
for (i = 0; i < tbbody_tr.length; i++) {
var tr_td = tbbody_tr[i].getElementsByTagName('td');
tbbody_tr[i].deleteCell(tr_td.length - 1);
}
}
}
</script>
</body>
</html>
댓글