javascript - createElement Image Source -
i'm dynamically adding rows/fields in code. have text field date, , next calendar button/image, user can use select appropriate date. however, if click "add new item" button add new row, can't quite image re-appear correctly calendar. rows being added, , field added calendar button, isn't locating image source , can't select pick date. can tell me i'm doing wrong , 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 = 0; (i = 0; < 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 = 0; (i = 0; < imgoffsetdateclearedcalendar1.children.length; i++) { var opt = document.createelement("img"); opt.setattribute('src', '../images/cal.gif'); opt.setattribute('pick 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 date" id="imgoffsetdateclearedcalendar1" name="imgoffsetdateclearedcalendar1"></a></p> </td> </tr> </tbody> </table> </body> </html>
there no such thing <image>
tag in html. do:
document.createelement("img");
also, table manipulation, i'd recommend using dom methods specific tables rather createelement/appendchild. see:
https://developer.mozilla.org/en/dom/table
Comments
Post a Comment