createElement Image Source

J'ajoute dynamiquement des lignes/champs dans ce code. J'ai un champ de texte pour la date, et à côté de lui est un bouton de calendrier/image, que l'utilisateur peut utiliser pour sélectionner la date appropriée. Toutefois, si je clique sur le bouton "Ajouter un nouvel élément" pour ajouter une nouvelle ligne, je n'arrive pas à faire réapparaître correctement cette image pour le calendrier. Les lignes sont ajoutées, et le champ est ajouté pour le bouton de calendrier, mais il ne trouve pas ma source d'image et je ne peux pas le sélectionner pour choisir une date. Quelqu'un peut-il me dire ce que je fais mal et qu'est-ce qui peut le corriger? Merci.createElement Image Source

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

Source

2010-01-11 SeanFlynn

Il n'existe pas de balise <image> en HTML. Est-ce:

document.createElement("img");

En outre, pour la manipulation de la table, je vous recommande d'utiliser des méthodes DOM spécifiques aux tables plutôt que createElement/appendChild. Voir:

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

Source

2010-01-11 20:52:01 slebetman

j'ai changé tous au lieu de ; toujours obtenir les mêmes résultats, cependant. – SeanFlynn

createElement Image Source

Répondre

Questions connexes