<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="javascript" type="text/javascript">
var tbl;
//addRow()와 delRow()에서 모두 쓰기 위해
function addRow()
{
tbl=document.getElementById("changeTbl");
//dom을 쓰기 위해 객체 생성
tbl.rows[tbl.clickedRowIndex].cells[1].innerHTML =
//클릭 이벤트 발생한 Row에 삭제 넣기 cell이 <td> 이고 row 가 <tr>
"<input type='button' value='삭제' onClick='delRow()'>";
//첫번째 row(tr)추가
var oRow = tbl.insertRow();
oRow.onmouseover = function() { tbl.clickedRowIndex = this.rowIndex };
var oCell1 = oRow.insertCell();
var oCell2 = oRow.insertCell();
oCell1.innerHTML = "<input type='text'>";
oCell2.innerHTML = "<input type='button' value='추가' onClick='addRow()'> ";
//두번째 row(tr) 추가
oRow = tbl.insertRow();
oRow.onmouseover = function() { tbl.clickedRowIndex = this.rowIndex };
var oCell1 = oRow.insertCell();
var oCell2 = oRow.insertCell();
oCell1.innerHTML = "시험";
oCell2.innerHTML = "<input type='text' value='추가' > ";
//이렇게 구현했을 경우 문제 점은 row[0]번째 값을 삭제 했을때 원래의 테이블의 크기가 깨질수가 있다는 것이다.
//그럴 경우 oCell1.width = 150; 요런식으로 addRow()에 각 row가 추가될때 마다 cell(td)크기를 지정해 주면 된다.
}
function delRow()
{
tbl.deleteRow(tbl.clickedRowIndex);
tbl.deleteRow(tbl.clickedRowIndex);
}
</script>
</head>
<body>
<center>
동적 테이블 변경 입니다.
<form>
<table border="1" id="changeTbl" >
<tr onmouseover="changeTbl.clickedRowIndex=this.rowIndex">
<!-- 이 부분이 키포인트 어떤 부분이 클릭 이벤트가 발생할 것인가 알려주기-->
<td><input type="text"></td>
<td> <input type='button' value='추가' onClick='addRow()'></td>
</tr>
<tr>
<td>시험</td><td><input type="text" size=20></td>
</tr>
</table>
</form>
</center>
</body>
</html>
'JAVASCRIPT > 동적테이블 변경' 카테고리의 다른 글
| DOM을 이용한 테이블 변경(테이블전체 또는 일부변경) (2) | 2008.10.30 |
|---|---|
| dom(자바 스크립트)를 이용한 동적 테이블 추가 삭제(열 ROW) (0) | 2008.10.24 |
댓글