티스토리 뷰

web 2.0/DOM

DOM 을 이용한 엘리먼트 생성 및 삭제(IE , crossbrowsing 작업 필요)

미련곰 2007. 10. 31. 14:19

 <script type="text/javascript">
  getdate = function(y, m, d)  
  {
   var yy = document.getElementById(y).value;
   var mm = document.getElementById(m).value;
    var retValue = "";
    
    if(yy=="")
    {
     alert("년을 선택해주세요");    
     return false;
    }
    if(mm=="")
    {
     return false;
    }
  
    if(mm == "2")
    {
      if(yy%4 == 0 && yy%100 != 0 || yy%400 == 0)
        retValue = "29";
      else
        retValue = "28";
    }
    else if(mm == "1"  || mm == "3"  || mm == "5"  || mm == "7"  || mm == "8"  || mm == "10" || mm == "12" )
    {
      retValue = "31";
    }
    else
    {
      retValue = "30";
    }
    
    var psd = document.getElementById(d);
    psd.length = 0;

    for(i=0; i < retValue; i++)
    {  
     var oday = i+1;    
     var opt = document.createElement('option');
    
     opt.setAttribute('value', oday);
    opt.innerText = oday;
     psd.appendChild(opt);
    }
  }
 
  esv = function(cfm, clist)
  {
   var result = false;
   for(var d=0; d<cfm.length; d++)
   {
    var after_sel = cfm.childNodes;
    if(clist == after_sel[d].getAttribute('value'))
    {
     result = true;
     break;
    }
   }
   return result;
  }
 
  add_list = function()
  {
   c_list = document.getElementById('consul_list');
   c_cfm = document.getElementById('consul_cfm');
   
   if(c_cfm.hasChildNodes())
   {
    for(var c=0; c<c_list.length; c++)
    {
     if(c_list[c].selected)
     {
      if(!esv(c_cfm, c_list[c].value))
      {
        var copt = document.createElement('option');
       copt.setAttribute('value', c_list[c].value);
       copt.innerText = c_list[c].text;
        c_cfm.appendChild(copt);
      }
     }
    }
   }
   else
   {
    for(var c=0; c < c_list.length; c++)
    {
     if(c_list[c].selected)
     {
       var copt = document.createElement('option');
      copt.setAttribute('value', c_list[c].value);
       copt.innerText = c_list[c].text;
       c_cfm.appendChild(copt);
     }
    }
   }
  }
 
  del_list = function()
  {
   d_cfm = document.getElementById('consul_cfm');
   
   if(d_cfm.length>0)
   {
    for(dd = 0; dd <= d_cfm.length; dd++)
    {
     if(d_cfm[dd].selected)
     {
      d_cfm.removeChild(d_cfm[dd]);
     }
    }
   }  
  }
 
 </script>

<body>

 <table border="0" cellpadding="2" cellspacing="0">
  <tr>
   <td>기간</td>
   <td colspan="3">
    <select name="p_s_y" id="p_s_y" style="width:90px;" onChange="getdate('p_s_y','p_s_m','p_s_d')">
     <option value="">--</option>
<%
   for(int p_s_y= 2007; p_s_y < 2020; p_s_y++)
   {
%>
     <option value="<%=p_s_y %>"><%=p_s_y %></option>
<%
   }
%>
    </select>&nbsp;년&nbsp;&nbsp;
    <select name="p_s_m" id="p_s_m" style="width:50px;" onChange="getdate('p_s_y','p_s_m','p_s_d')">
     <option value="">--</option>
<%
   for(int p_s_m= 1; p_s_m < 13; p_s_m++)
   {
%>
     <option value="<%=p_s_m %>"><%=p_s_m %></option>
<%
   }
%>
    </select>&nbsp;월&nbsp;&nbsp;
    <select name="p_s_d" id="p_s_d" style="width:50px;">
     <option value="">--</option>
    </select>&nbsp;일&nbsp;~&nbsp;
    <select name="p_e_y" id="p_e_y" style="width:90px;" onChange="getdate('p_e_y','p_e_m','p_e_d')">
     <option value="">--</option>
<%
   for(int p_e_y= 2007; p_e_y < 2020; p_e_y++)
   {
%>
     <option value="<%=p_e_y %>"><%=p_e_y %></option>
<%
   }
%>
    </select>&nbsp;년&nbsp;&nbsp;
    <select name="p_e_m" id="p_e_m" style="width:50px;" onChange="getdate('p_e_y','p_e_m','p_e_d')">
     <option value="">--</option>
<%
   for(int p_e_m= 1; p_e_m < 13; p_e_m++)
   {
%>
     <option value="<%=p_e_m %>"><%=p_e_m %></option>
<%
   }
%>
    </select>&nbsp;월&nbsp;&nbsp;
    <select name="p_e_d" id="p_e_d" style="width:50px;">
     <option value="">--</option>
    </select>&nbsp;일
   </td>
  </tr>
  <tr>
   <td>참석 상담사</td>
   <td>
    <select name="consul_list" id="consul_list" size="5" style="width:200px;" multiple>
     <option value="하나">하나</option>
     <option value="둘">둘</option>
     <option value="셋">셋</option>
     <option value="넷">넷</option>
     <option value="다섯">다섯</option>
     <option value="여섯">여섯</option>
     <option value="일곱">일곱</option>
     <option value="여덟">여덟</option>
    </select>  
   </td>
   <td>
    <input type="button" name="con_add" value="▶" onClick="add_list()"><br>
    <input type="button" name="con_del" value="◀" onClick="del_list()">
   </td>
   <td>
    <select name="consul_cfm" id="consul_cfm" size="5" style="width:200px;" multiple>
    </select>
   </td>
  </tr>  

 </table>
</body>

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함