javascript - Input field not appending to td -


i trying create table input field dynamically code ends creating empty table.

  var calcdiv = document.getelementbyid("calc_div");   var calctab = document.createelement('table');   var tbody = document.createelement('tbody');    var calcform = document.createelement('form');   calcform.id = "calculator_form";    //calc display   var tr = document.createelement('tr');   var td = document.createelement('td');   td.colspan = "4";   var comp = document.createelement('input');   comp.type = "text";   comp.value = 0;   comp.disabled = true;   comp.id = "compdisplay";   td.appendchild(comp); //this doesn't seem work   tr.appendchild(td);   tbody.appendchild(tr);   calcform.appendchild(comp);    calctab.appendchild(tbody);   calctab.style.width = "500px";   calctab.style.height = "500px";   calcdiv.appendchild(calctab); 

you missing line , incorrectly appending another. in:

tr.appendchild(td); tbody.appendchild(tr); calcform.appendchild(comp); 

you needed to:

tr.appendchild(td); tbody.appendchild(tr);  calctab.appendchild(tbody); <-- append tbody table calcform.appendchild(calctab); <-- append table form 

jsfiddle example

this produces html:

<div id="calc_div">     <table style="width: 500px; height: 500px;">         <tbody>             <tr>                 <td>                     <input type="text" disabled="" id="compdisplay">                 </td>             </tr>         </tbody>     </table> </div> 

note may want use td.setattribute('colspan','4'); instead of td.colspan = "4";


Comments

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

php - render data via PDO::FETCH_FUNC vs loop -

The canvas has been tainted by cross-origin data in chrome only -