Javascript 를 이용한 동적테이블 구성

자바스크립트

Javascript 를 이용한 동적테이블 구성

 

개발환경 : InternetExplorer 7.0,  window XP

 

이번글에서는 DOM 을 이용해서 테이블의 행을 동적으로 추가, 삭제

해 볼것이다. 여러가지 쓰임이 많고 응용 범위가 넓기 때문에

간단하게 정리했다. 브라우저에 종속적인 코드들이 있어서 다룰 내용이

많지만 이번에는 익스플로어 에서만 테스트 한 내용을 올린다. 크롬이나

파이어 폭스에서는 이후 공통적으로 사용할수 있는 소스를 만들어

개제할 예정이다.

 

동적으로 테이블의 내용을 추가하는 방법에는 두가지가 있는데

DOM appendChild 함수를 이용해 개체에 자식 요소를 추가하는 것이다.

추가할 자식요소는 var oDiv = document.createElement(‘DIV’) 로 생성하고

document.body.appendChild(oDiv); 처럼 원하는 개체에 appendChild

이용해 추가하면 된다.

 

(1) appendChild 를 이용한 방법

 

간단한 예제를 추가하였는데 UL LI 태그를 집어 넣는 내용이다.


<SCRIPT>
function appChild(){
  if (oList.all.length<6){
    var oNewNode=document.createElement('LI');
    oList.appendChild(oNewNode);
    oNewNode.innerText='항목 번호 '+oList.all.length;
  }
}
</SCRIPT>
<UL id=oList>
<LI>항목 번호  1
<LI>항목 번호  2
</UL>
<INPUT type="button" value="자식 개체 추가" onclick="appChild()">

appendChild 를 이용한 예제를 하나 더 소개한다. 이것은 좀더 상세한

제어를 한 내용이다. 그 내용을 보자면 trtd 개체를 생성하고

각 개체들의 속성값을 셋팅하였다.

var tr = document.createElement("tr");
tr.setAttribute("bgColor", "#FFFFCC"); // 배경색
tr.setAttribute("height", "30"); // 높이
그리고 tr td를 추가하고 tr table 개체에 추가하였다

<html>
<head>
<title></title>
<script language="javascript">
	function Add() {
		var table1 = document.getElementById("insertTable");
		// tr 개체를 얻어와 속성값을 조절한다.
		var tr = document.createElement("tr");
		tr.setAttribute("bgColor", "#FFFFCC"); // 배경색
		tr.setAttribute("height", "30"); // 높이 
		
		var td1 = document.createElement("td");
		td1.setAttribute("width", "100"); // 넓이
		td1.innerText = document.all.txtHome.value;
		var td2 = document.createElement("td");
		td2.setAttribute("width", "200"); // 넓이
		td2.innerText = document.all.txtAway.value;

		tr.appendChild(td1);
		tr.appendChild(td2);
		// 초기에 보여주는' 내용이 없습니다' 행을 지운다.
		if (table1.firstChild.lastChild.childNodes.length == 1)
			table1.firstChild.removeChild(table1.firstChild.lastChild);

		// 입력된값을 넣은 tr 개체를 추가한다.
		table1.firstChild.appendChild(tr);
	}
</script>
</head>
<body>
<h3>경기</h3>
<table border="1" width="300" id="insertTable">
	<tr>
		<th width="100">홈팀</th>
		<th width="200">원정팀</th>
	</tr>
	<tr>
		<td align="center" colspan="2">내용이 없습니다</td>
	</tr>
</table>
<br/>
홈팀 :
<input type="text" size="10" name="txtHome" />원정팀 :
<input type="text" size="10" name="txtAway" /> 
<button onclick="Add();">추가하기</button>
</body>
</html>

(2) innerHTML 을 이용한 방법

 

두번째는 innerHTML 을 이용한다. 넣을 내용을 구성한뒤 innerHTML

변수에 대입하면 된다.

<html>
<script>
    var rowIndex = 1;
    function addFile(form,k){
        if(rowIndex > (5-k)) return false;
        var oCurrentRow,oCurrentCell;
        var sAddingHtml;
        oCurrentRow = insertTable.insertRow();
        rowIndex = oCurrentRow.rowIndex;
        oCurrentCell = oCurrentRow.insertCell();
        rowIndex++;

        var strHTML =  "<tr align='center'>";
    	strHTML += "<td width='50'>"+ rowIndex +"</td>";
    	strHTML += "<td colspan=3 width='60'><INPUT class=input TYPE=FILE NAME='filename" +rowIndex + "' size=25></td>";
    	strHTML += "</tr>";		
    	
        oCurrentCell.innerHTML = strHTML;
        form.rowCount.value = rowIndex;
    }
   
    //첨부파일 삭제
    function deleteFile(form){
        if(rowIndex<2){
            return false;
        }else{
            form.rowCount.value = form.rowCount.value - 1;
            rowIndex--;
            insertTable.deleteRow(rowIndex);
        }
    }
   
</script>
<body>
<form name="write">
    <table name='insertTable' id='insertTable' border=0 cellpadding=0 cellspacing=0>
        
    </table>
    <input type="button" value="추가" onClick="addFile(write,1)" border=0 style='cursor:hand'>
    <input type="button" value="삭제" onClick='deleteFile(write)' border=0 style='cursor:hand'>
    <input type="hidden" name="rowCount" value="1">
</form>                       
</body>
</html>
Posted by 녹두장군

댓글을 달아 주세요