Question

Я динамически добавляю строки / поля в этот код. У меня есть текстовое поле для даты, а рядом с ним кнопка календаря / изображение, которое пользователь может использовать для выбора соответствующей даты. Однако, если я нажму кнопку «Добавить новый элемент», чтобы добавить новую строку, я не смогу заставить это изображение снова правильно отображаться для календаря. Добавляются строки, и добавляется поле для кнопки календаря, но оно не определяет источник моего изображения, и я не могу выбрать его, чтобы выбрать дату. Может кто-нибудь сказать мне, что я делаю не так и что можно исправить? Спасибо.

<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>