I'm dynamically adding rows/fields in this code. I have a text field for the date, and next to it is a calendar button/image, which the user can use to select the appropriate date. However, if I click the "Add New Item" button to add a new row, I can't quite get this image to re-appear correctly for the calendar. The rows are being added, and the field is added for the calendar button, but it isn't locating my image source and I can't select it to pick a date. Can someone tell me what I'm doing wrong and what can correct it? Thanks.
<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>