createElement 图像源

发布于 2024-08-17 20:32:38 字数 3276 浏览 5 评论 0原文

我在此代码中动态添加行/字段。我有一个日期文本字段，旁边是一个日历按钮/图像，用户可以使用它来选择适当的日期。但是，如果我单击“添加新项目”按钮添加新行，我无法完全让该图像在日历中正确重新显示。正在添加行，并为日历按钮添加字段，但它没有找到我的图像源，我无法选择它来选择日期。有人可以告诉我我做错了什么以及可以纠正什么吗？谢谢。

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

原文

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>

分享到QQ

分享到微博