Please Enable JavaScript!
Gon[ Enable JavaScript ]

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")

<script type="text/javascript">

<!--

  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)\">&nbsp;" +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>

<form name="form">

<table id="tblInput" width="392" border="1">

  <tr align="center">

    <td colspan="5">입력란</td>

  </tr>

  <tr align="center">

    <td width="72"><input type="checkbox" name="chk" onclick="totSysChk(this);">

    번호</td>

    <td width="72">이름</td>

    <td width="72">나이</td>

    <td width="72">성별</td>

    <td width="164">국적</td>

  </tr>

  <tr>

    <td><input name="test01" type="text" size="12"></td>

    <td><input name="test01" type="text" size="12"></td>

    <td><input name="test01" type="text" size="12"></td>

    <td><input name="test01" type="text" size="12"></td>

    <td><input name="test01" type="text" size="12"></td>

  </tr>

</table>

<p>

  <input name="Button" type="button" onclick="doAddRow();" value="INSERT">

  <input type="button" name="Submit2" onclick="doDelRow();" value="DELETE">

  <input type="button" name="Submit3" onclick="doOpen();" value="OPEN">

</p>

<div id="divCreate" style="display:none">

<table id="tblOutput" width="600" border="1">

  <tr align="center">

    <td>번호</td>

    <td>이름</td>

    <td>나이</td>

    <td>성별</td>

    <td>국적</td>

    <td>기능</td>

  </tr>

</table>

</div>

</form>

</body>

</html>


반응형
Posted by 녹두장군1
,