dom(자바 스크립트)를 이용한 동적 테이블 추가 삭제(열 ROW)
<%@ 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 가 안먹는 군요 어떻게 된걸까요? -->