通过 Javascript 向 table 单元格添加一些文本和输入框

Question

我正在尝试将包含两列的行添加到 HTML 中预先存在的 table。到目前为止，我已经成功地做到了这一点。但是，我想在每个单元格中同时包含文本和输入框。到目前为止，这是我最接近的时间：

newinputbox = document.createElement("input");
newinputbox.setAttribute("type", "text");

table = document.getElementById("input_table");
row = table.insertRow(3);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
thetext = document.createTextNode("Text:");
cell1.appendChild(thetext, newinputbox);

不幸的是，这只是 returns 文本。如果我去掉了cell1.appendChild(thetext, newinputbox)语句中的thetext，那么它就只有returns这个输入框了。

有人可以帮我吗？

Answer 1

您似乎假设 appendChild() 可以接收不定数量的要追加的参数。它只需要一个；任何后续的都将被忽略。

更简单的解决方案：

cell1.appendChild(newinputbox);
cell1.innerHTML += 'Text:';

Answer 2

问题的根源是对 Node.appendChild() 工作原理的简单误解；它只接受一个参数并且在每次调用时只附加一个子元素。

因此，修复错误的最简单方法就是再次调用 Node.appendChild()：

let newinputbox = document.createElement("input");
newinputbox.setAttribute("type", "text");

let table = document.getElementById("input_table"),
  row = table.insertRow(0),
  cell1 = row.insertCell(0),
  cell2 = row.insertCell(1),
  thetext = document.createTextNode("Text:");

// append the first of the new child elements:
cell1.appendChild(thetext);

// append the second of the new child elements:
cell1.appendChild(newinputbox);

<table id="input_table">
</table>

JS Fiddle demo.

或者，您可以创建一个简单的辅助函数，它接受多个参数并附加每个节点：

// defining a simple named function that takes two arguments,
// parent: the node to which the child nodes are to be appended,
// and an indefinite number (zero or more) of other arguments
// which are the child nodes to be appended.
// This uses a spread operator to destructure the arguments
// following 'parent' to be an array-like iterable object:
function appendMultiple(parent, ...progeny) {

  // here we use forEach to iterate over the contents of the
  // progeny variable:
  progeny.forEach(

    // 'child' refers to the current 'child' node of the
    // 'array' of child nodes:
    (child) => parent.appendChild(child)
  );
}

let newinputbox = document.createElement("input");
newinputbox.setAttribute("type", "text");

let table = document.getElementById("input_table"),
  row = table.insertRow(0),
  cell1 = row.insertCell(0),
  cell2 = row.insertCell(1),
  thetext = document.createTextNode("Text:");
appendMultiple(cell1, thetext, newinputbox);

<table id="input_table">
</table>

JS Fiddle demo.

参考文献：

通过 Javascript 向 table 单元格添加一些文本和输入框

Add some text and an input box to a table cell through Javascript

html

javascript

html-table

appendchild