select, table등의 동적 객체 생성

DOM객체를 이용, 동적select, table 제어
<SCRIPT>
function appChild(){
  if (oList.all.length<6){
    var oNewNode=document.createElement("option");
    oNewNode.setAttribute("id", "item"+(ulObj.all.length+1)); //ID부여
    oNewNode.innerText="id=item"+(oList.all.length+1);
    oList.appendChild(oNewNode);
  }
}
</SCRIPT>

<select id=oList size=10>
<option name=item1 value="">항목 번호 1</option>
</select>
<INPUT type="button" value="자식 개체 추가" onclick="appChild()">

<BR><BR>-------------------------<BR><BR>

<SCRIPT>
function insertElement(){
  var nod=document.createElement('option');
  nod.setAttribute("id","oLi"+(ulObj.all.length+1)); //ID부여
  nod.innerText="id=oLi"+(ulObj.all.length+1);
  ulObj.insertBefore(nod,eval("oLi"+(ulObj.all.length)));
}
</SCRIPT>

<select id=ulObj size=10>
<option  id="oLi1" name=item value="">항목 번호 1</option>
<option  id="oLi2" name=item value="">항목 번호 2</option>
<option  id="oLi3" name=item value="">항목 번호 3</option>
</select>
<INPUT type="button" value="개체 삽입" onclick="insertElement()">

<BR><BR>-------------------------<BR><BR>

<TABLE id=tableObj border=1 width=600>
<TR id=row1>
<TD id=cell11>예제 칸1-1</TD>
<TD id=cell12>예제 칸1-2</TD>
</TR>
<TR id=row2>
<TD id=cell21>예제 칸2-1</TD>
<TD id=cell22>예제 칸2-2</TD>
</TR>
<TR id=row3>
<TD id=cell31>예제 칸3-1</TD>
<TD id=cell32>예제 칸3-2</TD>
</TR>
</TABLE>
<SCRIPT>
function makeRow(){
  newTr=tableObj.insertRow(document.createElement('<TR>'));
  newTd=newTr.insertCell(document.createElement('<TD>'));
  newTd.innerText='생성, 삽입된 줄-칸1';
  newTd=newTr.insertCell(document.createElement('<TD>'));
  newTd.innerText='생성, 삽입된 줄-칸2';
}
function delRow(){
  tableObj.deleteRow(0);
}
</SCRIPT>
<BUTTON onclick="delRow();">테이블 줄 제거 클릭</BUTTON>
<BUTTON onclick="makeRow();">테이블 줄 생성 클릭</BUTTON>

TR에 insertCell(TD)이라는 함수가 잇음 이거 사용하면 TD를 제어할수있음

table를 마음대로 컨트롤 합니다.

<table id=sendTable border>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>

table id=sendTable<br>
otr = sendTable.insertRow(0) : 위한줄을 추가합니다<br>
otr = sendTable.insertRow()=sendTable.insertRow(1)  : 다음 한줄을 추가합니다<br>
<BR>
otd = otr.insertCell()=otr.insertCell(-1)=otr.insertCell(0) : 셀을 추가합니다<br>
otd.innerHTML = "sell1" : 로 그셀에 들어갈 내용을 정의합니다
<BR><BR>
(숫자) 가 들어가기 위해서는 row 나 cell 이 들어갈 숫자가 정의되야 합니다.

<script>
  otr = sendTable.insertRow();
  otd = otr.insertCell();
  otd.innerHTML = "*sell1";
  otd = otr.insertCell();
  otd.innerHTML = "*sell2";
  otd = otr.insertCell();
  otd.innerHTML = "*sell3";

  otr = sendTable.insertRow();
  otd = otr.insertCell(0);
  otd.innerHTML = "sell_a1";
  otd = otr.insertCell(1);
  otd.innerHTML = "sell_b2";
  otd = otr.insertCell(2);
  otd.innerHTML = "sell_c3";

  otr = sendTable.insertRow();
  otd = otr.insertCell();
  otd.innerHTML = "sell21";
  otd = otr.insertCell();
  otd.innerHTML = "sell22";
  otd = otr.insertCell(0);
  otd.innerHTML = "1번 sell에 덮어쓰기 insertCell(0)";

  otr = sendTable.insertRow(3);
  otd = otr.insertCell();
  otd.innerHTML = "&3번줄에 끼어넣기 sell1";
  otd = otr.insertCell();
  otd.innerHTML = "3번줄에 끼어넣기 sell2";
  otd = otr.insertCell();
  otd.innerHTML = "3번줄에 끼어넣기 sell3";
  otd = otr.insertCell();
  otd.innerHTML = "*3번줄에 끼어넣기 sell4";
</script>

=======================
동적 select 예제입니다
=======================

  if (document.all.COMP) document.all.COMP.options[0] = new Option("라인명","");
  if (document.all.PART) {
   if (document.all.PART[1].length==undefined) {
    document.all.PART.options[0] = new Option("설비명2","");
   } else {
    for (var i=0;i<document.all.PART.length;i++) {
     document.all.PART[i].options[0] = new Option("설비명2","");
    }
   }
  }
  if (document.etcSelect.PART) document.all.etcSelect.options[0] = new Option("설비명","");