javascript - IE 9 not showing table populated by js -
javascript - IE 9 not showing table populated by js -
i having issue 'addeditems' table not displaying in ie 9 if used on firefox 30 displays should. in ie sends post info , when check html developer tools shows html elements on page. have tried see if setting table display block there no change.
the purpose of code allow user select drop downwards list type of equipment want add, able add together number of items either foo or bar lists onto table sent in items[] post variable. table has delete button every row user may take out erroneously added equipment.
here html file:
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> </head> <body> <form method="post"> <ul> <li id="equipmentselector" > <label for="equipmenttype">equipment type</label> <div> <select id="equipmenttype" name="equipmenttype"> <option value="" selected="selected"></option> <option value="0" >foo</option> <option value="1" >bar</option> </select> </div> </li> <li id = "fooholder"> <label class="description" for="foo">foo</label> <select id="foo"> <option value="" selected="selected"></option> <option value="0" >foo zero</option> <option value="1" >foo one</option> <option value="2" >foo two</option> <option value="3" >foo three</option> </select> <input type = "button" value = "add foo" id = "fooclick" ></input> </li> <li id = "barholder"> <label class="description" for="bar">bar</label> <select id="bar"> <option value="" selected="selected"></option> <option value="0" >bar zero</option> <option value="1" >bar one</option> <option value="2" >bar two</option> <option value="3" >bar three</option> </select> <input type = "button" value = "add bar" id = "barclick" ></input> </li> <li> <table> <tbody id = "addeditems"> </tbody> </table> </li> <li> <input type= "submit" id="saveform" name="submit" value="submit" /> </li> </ul> </form> <script src = "ieerror.js"></script> </body> </html> here ieerror.js file:
function prepareeventhandlers(){ document.getelementbyid("equipmenttype").onchange = function(){ var equiptype = document.getelementbyid("equipmenttype").value if(equiptype === "1"){ document.getelementbyid("barholder").style.display = "block"; document.getelementbyid("fooholder").style.display = "none"; } else if(equiptype === "0"){ document.getelementbyid("fooholder").style.display = "block"; document.getelementbyid("barholder").style.display = "none"; } } document.getelementbyid("fooholder").style.display = "none"; document.getelementbyid("barholder").style.display = "none"; function removediv() { var parentid = $(this).parent().parent().attr("id"); $('#' + parentid).remove(); } var mynum = 0; function additem(getfromid){ var addtag = document.getelementbyid("addeditems"); var addvariable = document.getelementbyid(getfromid).value; var possibleid = getfromid + addvariable; if(!document.getelementbyid(possibleid)){ var newtr = document.createelement("tr"); newtr.id = possibleid; var mytext = $('#'+ getfromid).find(":selected").text(); var newtd = document.createelement("td"); newtd.appendchild(document.createtextnode(mytext)); newtr.appendchild(newtd); addtag.appendchild(newtr); var submissioninput = document.createelement("input"); submissioninput.name = "item[]"; submissioninput.type = "hidden"; submissioninput.value = mytext; newtd.appendchild(submissioninput); var deleteinput = document.createelement("input"); deleteinput.type = "button"; deleteinput.value = "delete"; deleteinput.id = mynum; mynum += mynum; deleteinput.onclick = removediv; var deletetd = document.createelement("td"); deletetd.align = "right"; document.getelementbyid(possibleid).appendchild(deletetd); deletetd.appendchild(deleteinput); } } document.getelementbyid("barclick").onclick = function(){ additem("bar"); }; document.getelementbyid("fooclick").onclick = function(){ additem("foo"); }; }; window.onload = function(){ prepareeventhandlers(); }; edit:
here link jsfiddle: http://jsfiddle.net/dtcav/xjvjr/1/
what horrible code, let's begin:
validate html. i.e. <html> contains html5 <header> rather <head>
why utilize native js , jquery through eachother? why not stick jquery??
anyway, nitpicking <aside>, prepare problem alter <table> code into:
<table> <tbody id="addeditems"> </tbody> </table> this because ie9 create empty <tbody> in empty <table> , utilize table placeholder, inject <tr> , <td> tags straight <table>
javascript html
Comments
Post a Comment