Table Javasc DOM 작업(1)

Table Javasc DOM 작업
Table 객체 컬렉션
컬렉션
묘사
cells[]
표의 모든 칸을 포함하는 그룹을 되돌려줍니다.
rows[]
표의 모든 줄을 포함하는 그룹을 되돌려줍니다.
tBodies[]
표의 모든 tbody를 포함하는 그룹을 되돌려줍니다.
Table 객체 방법:
Table 객체 메서드
메서드
묘사
createCaption()
테이블에caption 요소를 만듭니다.
createTFoot()
테이블에 빈 tFoot 요소를 만듭니다.
createTHead()
테이블에 빈 tHead 요소를 만듭니다.
deleteCaption()
테이블에서caption 요소와 내용을 삭제합니다.
deleteRow()
테이블에서 행을 삭제합니다.
deleteTFoot()
테이블에서 tFoot 요소와 해당 컨텐트를 삭제합니다.
deleteTHead()
테이블에서 tHead 요소와 해당 컨텐트를 삭제합니다.
insertRow()
테이블에 새 행을 삽입합니다.
다음은 그 구체적인 운용에 대해 이야기하자.
어떤 Ztree 노드를 클릭하여 표의 한 줄 데이터(삭제 단추 포함)를 동적으로 증가시키고 삭제 단추를 누르면 이 줄을 삭제할 수 있으며 이 동시에 표에 추가된 모든 데이터를 기록할 수 있다.

var datas = new Array();	        // ID
	var count = 0;				// 
	function onClick(event, treeId, treeNode, clickFlag) {

		// 
		var nodedata = finddatainfo(treeNode.id);
		if(nodedata.success){
			var flag = true;
			if(nodedata.dataid == "")
			{
				flag = false;
			}
			var tableObj = document.getElementById("functionData");
			var rowCount = tableObj.rows.length;

			// ， 
			for(var i = 1 ; i < rowCount ; i++)
			{
				if(tableObj.rows[i].cells[0].innerHTML == nodedata.id)
				{
					flag = false;
					break;
				}
			}
			// ， 
			if(flag)
			{
				datas[count] = treeNode.id;
				count++;
				var rowObj = tableObj.insertRow(rowCount);
				var num = rowObj.insertCell(0);
				var id = rowObj.insertCell(1);
				var name = rowObj.insertCell(2);
				var btn = rowObj.insertCell(3);
				num.innerHTML=nodedata.id;
				id.innerHTML=nodedata.dataid;
				name.innerHTML=nodedata.dataname;
				btn.innerHTML="<button onclick='deleteRow(this)'> </button>";
			}
		}else{
			 alert(nodedata.info);	
		}
	}	

	// Table 
	function deleteRow(btn)
	{
		var row = btn.parentNode.parentNode;
		var context = row.cells[0].innerHTML;
		var index = -1;
		for(var i = 0 ; i <= count ; i++)
		{
			if(datas[i] == context){
				index = i;
				break;
			}
		}

		if(index != -1)
		{
			var temp = datas[index];
			datas[index] = datas[count-1];
			datas[count-1] = temp;
			datas.pop();
			
			count--;
			
			var i = btn.parentNode.parentNode.rowIndex;
			document.getElementById('functionData').deleteRow(i);
		}
	}

판권 성명: 본고는 블로거의 오리지널 문장으로 블로거의 허락 없이 전재할 수 없습니다.