createElement 이미지 소스

이 코드에서 행/필드를 동적으로 추가하고 있습니다. 나는 날짜에 대한 텍스트 필드를 가지고 있으며, 그 옆에 사용자가 적절한 날짜를 선택할 수있는 달력 버튼/이미지가있다. 그러나 "Add New Item"버튼을 클릭하여 새 행을 추가하면 캘린더에 대해이 이미지가 올바르게 다시 표시되지 않습니다. 행이 추가되고 있으며 캘린더 버튼에 필드가 추가되었지만 이미지 소스를 찾지 못하고 날짜를 선택할 수 없습니다. 누군가 내가 뭘 잘못하고 무엇을 정정 할 수 있는지 말해 줄 수 있습니까? 감사.createElement 이미지 소스

<html> 
<head> 
<script language="javascript"> 
function addNewItem() 
{ 
    var iX = document.getElementById("txtIndex").value; 
    iX ++; 
    document.getElementById("txtIndex").value = iX; 

    var tbl = document.getElementById("tblOffsetDetail").getElementsByTagName("TBODY")[0]; 
    var tr = document.createElement("TR"); 
    tbl.appendChild(tr); 

    //txtOffsetDateCleared1 
    var tdOffsetDateCleared = document.createElement("TD"); 
    tr.appendChild(tdOffsetDateCleared); 

    var p = document.createElement("P"); 
    tdOffsetDateCleared.appendChild(p); 

    var txtOffsetDateCleared = document.createElement("input"); 
    p.appendChild(txtOffsetDateCleared); 

    var imgOffsetDateClearedCalendar = document.createElement("img"); 
    p.appendChild(imgOffsetDateClearedCalendar); 

    txtOffsetDateCleared.id = "txtOffsetDateCleared" + iX; 
    txtOffsetDateCleared.setAttribute('size',10); //Set width using HTML 
    //txtOffsetDateCleared.style.width = '85px'; //Set width using CSS 

    var txtOffsetDateCleared1 = document.getElementById("txtOffsetDateCleared1"); 
    var i = 0; 

    for (i = 0; i < txtOffsetDateCleared1.children.length; i++) 
     { 
      var opt = document.createElement("option"); 
      opt.value = txtOffsetDateCleared1 [i].value; 
      opt.innerText = txtOffsetDateCleared1 [i].innerText; 
      txtOffsetDateCleared.appendChild(opt); 
     }  

    //imgOffsetDateClearedCalendar 
    var imgOffsetDateClearedCalendar1 = document.getElementById("imgOffsetDateClearedCalendar1"); 
    var i = 0; 

    for (i = 0; i < imgOffsetDateClearedCalendar1.children.length; i++) 
     { 
      var opt = document.createElement("img"); 
      opt.setAttribute('src', '../images/cal.gif'); 
      opt.setAttribute('Pick a date', 'alternate text'); 
      opt.setAttribute('height', '16px'); 
      opt.setAttribute('width', '16px'); 
      //opt.value = imgOffsetDateClearedCalendar1 [i].value; 
      //opt.innerText = imgOffsetDateClearedCalendar1 [i].innerText; 
      imgOffsetDateClearedCalendar1.appendChild(opt); 
     } 
</script> 
</head> 


    <body> 
    <table width="99%" border="1" cellpadding="2" cellspacing="2" class="WebApps" id="tblOffsetDetail"> 
    <tbody> 
    <tr> 
    <input type="button" class="button" value= "Add New Item" id="btnNewItem" name="btnNewItem" onClick="javascript:addNewItem();"> 
    <input type="text" id="txtIndex" name="txtIndex" value="1"> 
<td><p><a href="javascript:NewCal('txtOffsetDateCleared1','mmmddyyyy')"> 
       <input name="txtOffsetDateCleared1" type="text" id="txtOffsetDateCleared1" size="10" maxlength="10"> 
       <img src="../images/cal.gif" width="16" height="16" border="0" alt="Pick a date" id="imgOffsetDateClearedCalendar1" name="imgOffsetDateClearedCalendar1"></a></p>  

    </td> 
    </tr> 
    </tbody> 
    </table> 
    </body> 
    </html>

출처

2010-01-11 SeanFlynn