你如何使用Javascript复制表单字段？

例如，我想要一个看起来像这样的html表单：

 
 
Field A:
 
 
Field B:
 
 
  

我想要的是添加一个复制我整个上面的表单的按钮，但是将所有字段的1更改为2。 不仅仅是一个字段，而是代码的整个部分，包括表格。与我发布的字段相比，将有更多/不同的字段。

我已经尝试过这个解决方案，它正是我需要的：

http://www.quirksmode.org/dom/domform.html

但由于某些原因，在复制代码示例进行测试时无法复制function。 我甚至试图从字面上复制整个页面源以使其工作，但没有用。

Answer 1

         add form 
   

Answer 2

有一种叫做supplant的技术可以做到这一点。 我没有写它，我认为道格拉斯克罗克福德做了。 但我会引用它：

既然您的JavaScript程序已收到数据，它可以用它做什么？ 最简单的事情之一是客户端HTML生成。

 var template = '' + '
Last
{last}
First
{first}
'; 

请注意，我们有一个包含三个变量的HTML模板。 然后我们将获得一个包含与变量匹配的成员的JSON对象。

 var data = { "first": "Carl", "last": "Hollywood", "border": 2 }; 

然后我们可以使用替代方法用数据填充模板。

 mydiv.innerHTML = template.supplant(data); 

JavaScript字符串没有替代方法，但这是可以的，因为JavaScript允许我们扩充内置类型，为它们提供我们需要的function。

 String.prototype.supplant = function (o) { return this.replace(/{([^{}]*)}/g, function (a, b) { var r = o[b]; return typeof r === 'string' ? r : a; } ); }; 

来自http://www.json.org/fatfree.html

我看到的一种技术是避免模板的混乱变量分配：

这将使您编写更漂亮的代码，因为您可以使用getElementById引用它。

因此，在您的情况下，您只需查看需要添加和替换id的许多行，而不是使用JSON对象填充它。

Answer 3

您要链接的示例具有用作模板的表单的隐藏版本。 此模板具有ID（ readroot ），允许轻松选择（ getElementById ），然后克隆（ node.cloneNode() ）并将上面的DOM（ node.insertBefore() ）注入到源中的第二个标记（ writeroot ）。

在变量counter保持重复的数量。 它的’内容在每次克隆时更新（递增），然后将其’值附加到克隆节点中的所有字段名称。 （原始模板节点的字段没有数字后缀。）

这一切都非常简单，只需研究网页头部的javascript即可。 谷歌你无法理解的部分，你将实现你正在寻找的东西，并将在这个过程中学习一些。 利润！

Answer 4

我认为你应该像某些人所建议的那样使用像jQuery这样的库。 它会得到回报。

关于制作模板并在javascript中克隆它，使用IE时存在一些问题（据我所知，所有版本）。 当复制例如表单中的单选按钮时，IE将忽略对“名称”属性的任何编程更改。 因此，除非您为单选按钮创建自定义事件处理程序，否则当您跨部分复制它们时它们将无法按预期工作（例如，检查一个部分中的按钮将导致其他部分中的按钮未选中）。

Answer 5

哎呀，错误地读你的问题。 这个更好：

 function duplicate(frm) { newfrm = $(frm).clone(); $(newfrm).each(function(i,o) { if (o.name != null) { // or if ($(o).attr("name")) o.name = replaceIndex(o.name); } }); $(frm).parent().append(newfrm); } 

不确定实际的语法。 例如，您如何测试属性存在。 但是在Google中很容易找到。 这里replaceIndex（string）使用lastIndexOf（）来查找last [x]并将其替换为[x + 1]。