createElement圖片來源

我在此代碼中動態添加行/字段。我有一個日期文本字段，旁邊是一個日曆按鈕/圖像，用戶可以使用它來選擇適當的日期。但是，如果我點擊「添加新項目」按鈕添加一個新行，我無法完全讓這個圖像重新正確顯示日曆。行正在被添加，並且該字段被添加用於日曆按鈕，但它沒有定位我的圖像源，我不能選擇它來選擇日期。有人能告訴我我做錯了什麼，有什麼可以改正的嗎？謝謝。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