DOM 을 이용한 실시간 테이블 정보변경

웹 프로그래밍/자바스크립트

이것은 innerHTML 을 사용해서 단순히 내용을 넣는게 아니다.

태그정보를 읽어와서 HTML 을 마음대로 조작할수 있다.

여기에 있는 예제는 table 에 tr 을 집어넣고 뺄수 있으며 각 태그에 속성정보를

설정하고 변경할수 있다. 이것은 DOM 객체를 이용해서 가능한것이다.

아래 그림에서 처럼

먼저 OPEN 버튼을 클릭하면 div 에 쌓여 보이지 않던 table 정보가 보인다.

위의 입력란 Input 박스에 값을 넣고 INSERT 버튼을 클릭하게 되면 OPEN 해서

열어놨던 테이블에 tr 정보가 추가 되게 된다. 각 td 에 들어가는 값은 input 박스에

입력한 값들이다.

그리고 기능에 삭제버튼을 클릭하게 되면 그 줄 tr 이 삭제 되게 된다.

<html>

<head>

<title>Untitled Document</title>

#parse("/common/top.vm")

<!--

var rowindex;// mouseover 했을때 저장되는 tr 행값전역

function doAddRow(){

var tblInput = document.getElementById("tblInput");

var arrInput = tblInput.getElementsByTagName("input");

var arrData = new Array();

for (var i=0; i < arrInput.length; i++){

arrData[i] = arrInput[i].value;

}

var innerTable = document.getElementById("divCreate");

// div 에 속해있는 table 객체가져오기

var arrTable = innerTable.getElementsByTagName("table");

var arrExistTr = arrTable[0].getElementsByTagName("tr");

var currentTr = arrExistTr.length + 1;

var arrTr = document.createElement("tr");

arrTr.onmouseover = function(){eventOnMouseOver(this.rowIndex)};

var arrTd1 = document.createElement("td");

arrTd1.innerHTML = "<input type=\"checkbox\"
name=\"chk\" onClick=\"totSysChk(this)\"> " +arrData[1];

arrTd1.setAttribute("bgColor", "white");

var arrTd2 = document.createElement("td");

arrTd2.innerHTML = arrData[2];

var arrTd3 = document.createElement("td");

arrTd3.innerHTML = arrData[3];

var arrTd4 = document.createElement("td");

arrTd4.innerHTML = arrData[4];

var arrTd5 = document.createElement("td");

arrTd5.innerHTML = arrData[5];

var arrTd6 = document.createElement("td");

arrTd6.innerHTML = "<a href='javascript:deleteTr();'>[삭제]</a>";

arrTd6.setAttribute("align", "center");

arrTr.appendChild(arrTd1);

arrTr.appendChild(arrTd2);

arrTr.appendChild(arrTd3);

arrTr.appendChild(arrTd4);

arrTr.appendChild(arrTd5);

arrTr.appendChild(arrTd6);

arrTable[0].lastChild.appendChild(arrTr);

}

//이벤트 등록 함수

function eventOnMouseOver(no){

rowindex = no;

}

// tr을 삭제한다.

function deleteTr(){

// 삭제 첫번째 방법 Index 로 한다.

/* var innerTable = document.getElementById('divAddAuth');

var arrTable = innerTable.getElementsByTagName("table");

var arrExistTr = arrTable[0].getElementsByTagName("tr");

arrTable[0].deleteRow(no-1);*/

// 삭제 2번째 방법 tr선택한 값을 가져와서 삭제

document.all.tblOutput.deleteRow(rowindex);

}

// 테이블을 연다

function doOpen(){

var trSysid = document.getElementById("divCreate");

var btnOpen = document.getElementById("btnOpen");

if (trSysid.style.display == "none"){

trSysid.style.display = "";

btnOpen.value = "CLOSE";

}else{

trSysid.style.display = "none";

btnOpen.value = "OPEN";

}

// 테이블에 있는 체크박스를 모두 활성/비활성화 한다.

function totSysChk(input){

var divCheck = document.getElementById("divCreate");

var check_arr = divCheck.getElementsByTagName("input");

if (input.checked){

for (var i=0; i < check_arr.length; i++){

var check = check_arr[i].checked = true;

}

}else{

for (var i=0; i < check_arr.length; i++){

var check = check_arr[i].checked = false;

}

//-->

</script>

</head>

<body>

</tr>

번호</td>

</tr>

<tr>

</tr>

</table>

<p>

</p>

</tr>

</table>

</div>

</form>

</body>

</html>

'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글

Ajax 라이브러리 Dojo 에서 form 을 비동기적으로 submit 하기 (0)	2009.07.05
Dojo를 이용해서 간단하게 Ajax 통신 구현 예제 (0)	2009.07.05
Dojo 브라우저 툴킷 (0)	2009.07.04
자바스크립트 UI 라이브러리 툴킷자원 URL 주소 모음 (0)	2009.06.30
javascript 에서 문자열 구성할때 태그에 쓰는 "(쌍따움표) 표시하고 싶을때 (1)	2009.05.17
ajax 를 편리하게 사용할수 있는 prototype framwork 간단한 예제 (0)	2009.03.30
Ajax 란 무엇이며 순수 Ajax 함수로 간단한 구현예제 정리 (1)	2009.03.30
DOM 예제 : DOM 이벤트 객체의 속성정보를 모두 보여준다 (0)	2009.02.28

Posted by 녹두장군1

DOM 을 이용한 실시간 테이블 정보변경

'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글

카테고리

티스토리툴바