例如，我想要一个看起来像这样的 html 表单：
<table>
<tr>
<td>Field A:</td>
<td><input type='text' name='fielda[1]'></td>
<td>Field B:</td>
<td><textarea name='fieldb[1]'></textarea></td>
</tr>
</table>
我想要的是添加一个按钮来复制我上面的整个表单，但将所有字段的 1 更改为 2。不仅仅是一个字段，而是整个代码部分，包括表格。与我发布的字段相比，会有更多/不同的字段。
我已经尝试过这个解决方案，它完全符合我的需要：
http://www.quirksmode.org/dom/domform.html
但由于某种原因，复制代码示例进行测试时无法复制功能。我什至尝试从字面上复制整个页面源代码以使其正常工作，但无济于事。
【问题讨论】：
标签： php javascript jquery ajax json
有一种称为 supplant 的技术可以做到这一点。不是我写的，我想是道格拉斯·克罗克福德写的。但我会引用它：
既然您的 JavaScript 程序已经接收到数据，它可以用它做什么？最简单的事情之一是客户端 HTML 生成。
var template = '<table border="{border}"><tr><th>Last</th><td>{last}</td></tr>' +
'<tr><th>First</th><td>{first}</td></tr></table>';
请注意，我们有一个 HTML 模板，其中包含三个变量。然后我们将获得一个 JSON 对象，其中包含与变量匹配的成员。
var data = {
"first": "Carl",
"last": "Hollywood",
"border": 2
};
然后我们可以使用替代方法将数据填充到模板中。
mydiv.innerHTML = template.supplant(data);
JavaScript 字符串不附带替代方法，但这没关系，因为 JavaScript 允许我们扩充内置类型，为它们提供我们需要的功能。
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
我见过的一种避免模板的混乱变量分配的技术是：
<script id="rowTemplate" type="text/html">
<tr>
<td>Field A:</td>
<td><input type='text' name='fielda[{id}]'></td>
<td>Field B:</td>
<td><textarea name='fieldb[{id}]'></textarea></td>
</tr>
</script>
这将使您编写更漂亮的代码，因为您可以使用 getElementById 引用它。
因此，在您的情况下，您无需使用 JSON 对象填充它，而是查看需要添加和替换 id 的行数。
【讨论】：
您要链接到的示例具有用作模板的隐藏版本的表单。这个模板有一个 ID (readroot)，可以很容易地选择它 (getElementById)，然后克隆 (node.cloneNode()) 并注入到上面的 DOM (node.insertBefore()) 源中的第二个标记 (@ 987654325@)。
在变量counter 中保留了重复的数量。每次克隆时都会更新（递增）其内容，然后将其值附加到克隆节点中的所有字段名称。 （原始模板节点的字段没有数字后缀。）
这一切真的很简单，只需研究网页头部的javascript即可。谷歌你看不懂的部分，你会得到你想要的，并且会在这个过程中学到一些东西。利润！
【讨论】：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
(function($){
$countForms = 1;
$.fn.addForms = function(){
var myform = "<table>"+
" <tr>"+
" <td>Field A ("+$countForms+"):</td>"+
" <td><input type='text' name='fielda["+$countForms+"]'></td>"+
" <td>Field B ("+$countForms+"):</td>"+
" <td><textarea name='fieldb["+$countForms+"]'></textarea></td>"+
" <td><button>remove</button></td>"+
" </tr>"+
"</table>";
myform = $("<div>"+myform+"</div>");
$("button", $(myform)).click(function(){ $(this).parent().parent().remove(); });
$(this).append(myform);
$countForms++;
};
})(jQuery);
$(function(){
$("#mybutton").bind("click", function(){
$("#container").addForms();
});
});
</script>
</head>
<body>
<button id="mybutton">add form</button>
<div id="container"></div>
</body>
</html>
【讨论】：
我认为你应该像一些人建议的那样使用某种库，比如 jQuery。会有回报的。
关于制作模板并在javascript中克隆它，使用IE（据我所知的所有版本）时会出现一些问题。复制时，IE 将忽略对“名称”属性的任何编程更改，例如表单中的单选按钮。因此，除非您为单选按钮创建自定义事件处理程序，否则当您跨部分复制它们时，它们将无法按预期工作（例如，选中一个部分中的按钮将导致另一部分中的按钮未选中）。
【讨论】：
糟糕，您的问题读错了。这样更好：
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);
}
不确定实际语法。例如。你如何测试属性的存在。不过很容易在谷歌上找到。 这里 replaceIndex(string) 使用 lastIndexOf() 查找最后一个 [x] 并将其替换为 [x+1]。
【讨论】：