<%@ 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에 삭제 넣기
"<input type='button' value='삭제' onClick='delRow()'>";
var oRow = tbl.insertRow();
oRow.onmouseover = function() { tbl.clickedRowIndex = this.rowIndex };
var oCell1 = oRow.insertCell();
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()'> ";
}
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>
</table>
</form>
</center>
</body>
</html>
<!-- tr과 tr 사이에 새로운tr이 들어가는 구문입니다. 그런데 tbl.clickedRowIndex 가 안먹는 군요 어떻게 된걸까요? -->
'JAVASCRIPT > 동적테이블 변경' 카테고리의 다른 글
| 자바스크립트 이용한 DHTML 테이블 변경[동적 테이블 변경] (0) | 2009.01.20 |
|---|---|
| DOM을 이용한 테이블 변경(테이블전체 또는 일부변경) (2) | 2008.10.30 |
댓글