php - 你如何使用 Javascript 来复制表单域？

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

有一种叫做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 的行数。