你如何使用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引用它.

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