createElement Image Source

Ich bin dynamisch hinzufügen von Zeilen/Felder in diesem code. Ich habe ein Textfeld für das Datum und daneben befindet sich eine Kalender-Schaltfläche/Bild, das der Benutzer verwenden können, um das passende Datum auswählen. Allerdings, wenn ich auf die "Add New Item" - Taste, um eine neue Zeile hinzuzufügen, kann ich nicht so Recht, dieses Bild wieder korrekt angezeigt für den Kalender. Die Zeilen werden Hinzugefügt, und der Bereich ist für die Kalender-Schaltfläche, aber es ist nicht Auffinden meinem image source, und ich kann nicht wählen Sie es und wählen Sie ein Datum. Kann mir jemand sagen was ich falsch mache und was es korrigieren kann? Danke.

<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>
InformationsquelleAutor SeanFlynn | 2010-01-11
  1. 0

    Gibt es keine solche Sache wie eine <image> - tag in HTML. Tun:

    document.createElement("img");

    Auch, für Tisch-manipulation, ich würde empfehlen die Verwendung von DOM-Methoden-spezifischen Tabellen anstatt createElement/appendChild. Siehe:

    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

    • ich änderte alle zu <img> statt <Bild>"; noch immer die gleichen Ergebnisse, jedoch.
    InformationsquelleAutor slebetman
Schreibe einen Kommentar