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>

Answer 1

HTML中没有<image>标记。做：

document.createElement("img");

另外，对于表操作，我建议使用特定于表而不是createElement / appendChild的DOM方法。参见：

https://developer.mozilla.org/En/Gecko_DOM_Reference/Examples#Example_8.3a_Using_the_DOM_Table_Interface

https://developer.mozilla.org/en/DOM/table

https://developer.mozilla.org/en/DOM/table.insertRow

https://developer.mozilla.org/en/DOM/tableRow

createElement图像源

1 个答案: