반응형
|
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 를 이용한 예제를 하나 더 소개한다. 이것은 좀더 상세한
제어를 한 내용이다. 그 내용을 보자면 tr과 td 개체를 생성하고
각 개체들의 속성값을 셋팅하였다.
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>
반응형
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| javascript 개발을 위한 Visual Web Developer 2010 Express 설치 (0) | 2012.10.22 |
|---|---|
| Javascript 자바스크립트에서 배열사용하여 프로그램하기 (0) | 2012.09.19 |
| 자바스크립트를 개발하기 위한 에디터 종류 (1) | 2012.09.15 |
| Javascript 에서 jQuery API 를 이용한 버튼이벤트시 레이어 새창으로 표현 (0) | 2012.03.18 |
| javascript 에서 input 값에 숫자이외의 글 입력막기 (0) | 2010.11.19 |
| javascript 의 showModalDialog 사용해서 새창 제어하기 (1) | 2010.08.07 |
| 자식창과 부모창의 관계, iframe 내부와 메인페이지와의 관계제어 (5) | 2009.09.15 |
| Ajax 라이브러리 Dojo 에서 브라우저의 뒤로 /앞으로 가기 지원 (0) | 2009.07.05 |
