使用javascript将文本字段插入表格单元格答案

【问题标题】：inserting text-field to table cell using javascript使用javascript将文本字段插入表格单元格
【发布时间】：2016-02-18 19:24:52
【问题描述】：

我正在制作一个程序，我想在其中向表格单元格添加一个输入字段。看下面的代码：

var arr_title = ["song","artist","genre"];
for (var title in arr_title){
    var newl = document.createElement("input");
    newl.id = 'edit_text';
    var  newf = "td_" + arr_title[title];
    newf.appendChild(newl);
}

newf 获取 td_song、td_artist 等的值，这些已经定义为：

var td_song = document.createElement("td");
var td_artist = document.createElement("td");
var td_genre = document.createElement("td");

在同一个函数中，然后我将它们附加到一个表中，它工作正常

但是当我创建输入元素时出现错误：

未捕获的类型错误：newf.appendChild 不是函数

我知道它没有结束标记，它需要在表单元素中，但是当我尝试添加任何其他元素时，错误是一样的。

帮助！

【问题讨论】：

newf 是一个字符串而不是一个元素，所以你不能 appendChild 到它

标签： javascript textfield

【解决方案1】：

newf 中存储的值是字符串，而不是 DOM 元素； appendChild 不是字符串的有效方法。仅仅因为存储在newf 中的字符串值与您创建的变量的名称（td_song 等）匹配，并不意味着它现在是该元素的句柄。您最好将创建的元素存储在一个对象中，并关闭该值：

var elems = {
  td_song: document.createElement("td"),
  td_artist: document.createElement("td"),
  td_genre: document.createElement("td")
};
var arr_title = ["song","artist","genre"];
for (var title in arr_title){
    var newl = document.createElement("input");
    newl.id = 'edit_text';
    var  newf = "td_" + arr_title[title];
    elems[newf].appendChild(newl);
}

【讨论】：

谢谢你的想法..但我正在做的是在创建输入元素之前，我向 td 元素添加了一些文本（通过用户输入），然后在相同的表格单元格。因此，如果我按照您的方式进行操作..当我访问对象以附加文本然后添加文本框时，这不会创建两个不同的表格单元格吗？
我概述的方式将为 td_song、td_artist 和 td_genre 创建一个 td 元素，并将输入附加到任何元素，因为它当前正在您的代码中完成。当您访问该对象时，它不会创建另一个td，只有当您再次调用document.createElement('td') 时，我看不到您在任何地方这样做。如果您想在此之外的表格单元格中添加另一个元素，您只需调用：elems.td_song.appendChild(someOtherElement);，例如
哦，是的！这行得通。我现在明白了。谢谢，我刚刚读到为什么我们应该避免使用 eval，这是一个更好的主意 :)

【解决方案2】：

在这一行之后，newf 的内容只是一个简单的字符串，例如“td_song”。

var  newf = "td_" + arr_title[title];

您可能遇到“newf 不是函数”的 JS 错误？

如果您希望 newf 真正成为这些变量之一，您可以使用 eval() 进行探索

var  newf = eval("td_" + arr_title[title]);

【讨论】：

stackoverflow.com/questions/86513/…
非常感谢..这很有效..我不知道 eval..谢谢
哈哈。总是有一些机器人为 eval 哭泣。如果你不知道自己在做什么，过马路也很危险。我做了 +1 的 Rob 的回答，尽管它举了一个例子，说明如何在不使用对象 eval 的情况下完成它，这是一个深思熟虑的建议。
当然，@eric，如果你最终会这样做，你可以将这个标记为答案。
我的声望还没有超过 15 :P

【解决方案3】：

您尝试附加的<td> 是否具有“td_”+ arr_title[title] 的 ID？如果是这样，你需要这样做......

var newf = document.getElementById("td_" + arr_title[title]);
newf.appendChild(newl);

【讨论】：

谢谢，但它没有这个 id.. 表格单元格有一个共同的 id，为它们提供单独的 id 太麻烦了。

【解决方案4】：

newf 是一个字符串，你不能将 child 附加到字符串，如果你想引用这个名字的变量，你应该使用window：

window[newf].appendChild(newl);

希望这会有所帮助。

【讨论】：