자바스크립트 이용한 DHTML 테이블 변경[동적 테이블 변경]

JAVASCRIPT/동적테이블 변경

자바스크립트 이용한 DHTML 테이블 변경[동적 테이블 변경]

정윤재 2009. 1. 20. 18:16

<%@ 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>

저작자표시