Question

我正在尝试动态创建一个带有输入字段的表，但我的代码最终会创建一个空表。

  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 TO WORK
  tr.appendChild(td);
  tbody.appendChild(tr);
  calcForm.appendChild(comp);

  calcTab.appendChild(tbody);
  calcTab.style.width = "500px";
  calcTab.style.height = "500px";
  calcDiv.appendChild(calcTab);

Answer 1

你错过了一条线并错误地追加另一条线。在：

tr.appendChild(td);
tbody.appendChild(tr);
calcForm.appendChild(comp);

您需要：

tr.appendChild(td);
tbody.appendChild(tr); 
calcTab.appendChild(tbody); <-- append the tbody to the table
calcForm.appendChild(calcTab); <-- append the table to the form

<强> jsFiddle example

这会生成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>

请注意，您可能还想使用td.setAttribute('colspan','4');代替td.colspan = "4";

Answer 2

也许是因为你在两行之后的表单中再次添加名为“comp”的输入？ “calcField.addChild（对比）”

Answer 3

正在发生的事情是您将comp追加到td，然后将其追加到form。这会将其从表中删除并将其放入表单中，该表单未附加到文档中的任何位置。

Here's a sample附加表格注释掉了。或者您可能希望将表单附加到td。

Answer 4

我认为这种方法会帮助你。我编写了它，以便appendChild跟随DOM树。看一看。 注意：我创建了一个变量，将目标“calc_div”附加到文档正文。随意拿出来。

var div = document.body.appendChild(document.createElement('div'));
div.id = "calc_div";

var table = div.appendChild(document.createElement('table'));
table.style.width = "500px";
table.style.height = "500px";

var tbody = table.appendChild(document.createElement('tbody'));
var trow = tbody.appendChild(document.createElement('tr'));

var tcell = trow.appendChild(document.createElement('td'));
tcell.colSpan = "4";

var input = tcell.appendChild(document.createElement('input'));
input.id = "compDisplay";
input.type = "text";
input.value = 0;
input.disabled = true;

输入字段不附加到td

4 个答案: