Question

例如，我想要一个看起来像这样的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

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

Answer 1

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

现在您的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引用它。

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

Answer 2

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

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

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

Answer 3

<!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>

Answer 4

哎呀，不正确地读你的问题。这样更好：

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（）来查找last [x]并将其替换为[x + 1]。

Answer 5

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

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

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

5 个答案: