프로그래밍/자바스크립트

동적 셀렉트 박스 추가 버전.. (생성, 삭제)

Crazy_Kong 2006. 5. 17. 16:11

<html>
<head>
<script type="text/javascript">
function createselect() {

 var count = document.getElementsByName("time[]").length;
 var obj;

 var time = new Array("09","10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21");
 var t_length = time.length;

 if(count < 10){
  try {
   trj = document.createElement("tr");
   tdj = document.createElement("td");
   obj = document.createElement("<select name='time[]' />");
   text = document.createTextNode(" 시");
   ob2 = document.createElement("<select name='minute[]' />");
   text1 = document.createTextNode(" 분");

   document.getElementById("timepluse").appendChild(trj);
   trj.appendChild(tdj);
   tdj.appendChild(obj);
   tdj.appendChild(text);
   tdj.appendChild(ob2);
   tdj.appendChild(text1);

   for (i=0;i<t_length;i++){
    opt = document.createElement("OPTION");
    opt.text = time[i]+ " 시";
    opt.value = time[i];
    obj.add(opt);
   }

   for(i=0;i<60;i++){
    opt = document.createElement("OPTION");
    if(i<10){
     opt.text = "0" + i + " 분";
     opt.value = "0" + i;
    }
    else{
     opt.text = i + " 분";
     opt.value =i;
    }
    ob2.add(opt);
   }

  } catch(e) {
   trj = document.createElement("tr");
   tdj = document.createElement("td");
   obj = document.createElement("select");
   obj.name = "time[]";
   text = document.createTextNode(" 시");
   text1 = document.createTextNode(" 분");

   ob2 = document.createElement("select");
   ob2.name = "minute[]";

   document.getElementById("timepluse").appendChild(trj);
   trj.appendChild(tdj);
   tdj.appendChild(obj);
   tdj.appendChild(text);
   tdj.appendChild(ob2);
   tdj.appendChild(text1);

   for (i=0;i<t_length;i++){
    opt = document.createElement("OPTION");
    opt.text = time[i]+ " 시";
    opt.value = time[i];
    obj.appendChild(opt);
   }

   for(i=0;i<60;i++){
    opt = document.createElement("OPTION");
    if(i<10){
     opt.text = "0" + i + " 분";
     opt.value = "0" + i;
    }
    else{
     opt.text = i + " 분";
     opt.value =i;
    }
    ob2.appendChild(opt);
   }
  }
 }
}

function deleteeselect(){
 var table = document.getElementById("timepluse"); // 테이블 지정
 var t_count = table.rows.length;     // 테이블 row 개수 지정
 var row_index = t_count - 1;      // 테이블 row 의 인덱스 지정

 if(row_index >= 0){         // 하나도 없을 경우는 제외한다
  table.deleteRow(row_index);
 }
}
</script>
</head>
<body>
<form name="frm" action="쀍!!">
<input type="button" onclick="createselect();">생성</input>
<input type="button" onclick="deleteeselect();">삭제</input>
<table>
 <tbody id="timepluse">
 </tbody>
</table>
</form>
</body>
</html>