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
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
Post a Comment