[innerHTML] 동적 테이블 생성

Programming/Html/Tag

[innerHTML] 동적 테이블 생성

현수림 2010. 4. 27. 18:34

간만에 포스팅 올리네.

innerHTML을 사용해서 동적 테이블 생성하는 방법에 대해서 적어 보겠다.

동적 테이블은 html 소스상에는 <table id="test"></table> 라는 테이블만 만들어놓고

이후 필요시마다 test 테이블에 필드를 추가/제거 할 수 있는 테이블을 말한다.

좀 더 자세히 알아보려면 DOM(Document Object Model)을 공부해보자.

간단하게 동적 테이블을 생성하는 코드를 적어 본다.

<html>
<head>
	<title>innerHTML Test Page</title>
</head>
<script type="text/javascript">

/*
 * 공통, 공백체크
 * @author ndev@acanettv.com
 */
function chkNull(el) {
	//alert(el.value);
	if(el.value != null) {
    var str = el.value; 
    var reg = /\s+/g; 
    str = str.replace(reg,''); 
    if (str == '' || str == null) return false; 
    return true;
  }
}

// 발생되는 이벤트의 상황을 보여주기 위한 함수.
function fncOnMouseOver(parentElId, selectedIndex) {
  var parentElObj = document.getElementById(parentElId);	
  parentElObj.clickedRowIndex = selectedIndex;
  //qTbl.clickedRowIndex=this.rowIndex;
  //alert(parentElObj.clickedRowIndex);
}

//innerHTML확인하기 위해서 만듬
function showSrc() {
	document.getElementById("showSrc").value = document.documentElement.innerHTML;
}

/*
설문형 행 추가/삭제
*/

/*
 * EVENT, Row추가
 * @author ndev@acanettv.com
 */
function addRow(parentElId)
{
	var parentElObj = document.getElementById(parentElId);
	var elObj = parentElObj.insertRow();	// 행 생성
	
	var cellObj = elObj.insertCell();		// 칼럼 생성
	//var tagStr = "<input name=\"questions\" type=\"text\" style=\"width:100%\" onFocus=\"this.style.backgroundColor='#eaffc4'\" onBlur=\"this.style.backgroundColor='transparent'\" value=\"\"></input>";
	var tagStr = "<input id='questions' name='questions' type='text' style='width:100%' onFocus=\"this.style.backgroundColor='#eaffc4'\" onBlur=\"this.style.backgroundColor='transparent'\" value=''></input>";
	cellObj.innerHTML = tagStr;
	/*
	var cloneNode = parentElObj.childNodes[0].cloneNode(true);
	if (parentElObj != null && cloneNode != null) {
		parentElObj.insertAdjacentElement('beforeEnd',cloneNode.cloneNode(true));
	} else return;
	*/
}

/*
 * EVENT, Row삭제
 * @author ndev@acanettv.com
 */
function delRow(parentElId)
{
	// 마지막 row 삭제
	var parentElObj = document.getElementById(parentElId);
	if (parentElObj.rows.length > 1) {
		parentElObj.deleteRow(parentElObj.rows.length-1);
	} else alert("최소 1개이상 행이 존재해야 합니다.");
	//alert(parentElObj.rows.length);
	
}

/*
 * EVENT, Row 갯수 리턴.
 * @author ndev@acanettv.com
 */
function getRowCount(parentElId)
{
	var parentElObj = document.getElementById(parentElId);
	return parentElObj.rows.length;
}

소스 코드가 상당히 길다.

실제 사용중인 소스를 정리해서 만든거라 그럴 수 밖에 없지.

위 소스 사용시 주의할 점은 innerHTML 에서 tr 태그에 rowIndex를 설정하는건 현재 내가 추가할 위치, 삭제할 위치를 파악할 중요한 녀석이기 때문에
적절히 사용해야 한다.

rowIndex, clickedRowIndex를 사용하기 위해서는 tr 태그에 onmouseover = "부모테이블명.clickedRowIndex=this.rowIndex" 를 꼭 써줘야 한다.

test999.html

저작자표시 비영리 변경금지 (새창열림)