使用javascript在表单中添加另一个字段列表

Question

我有一个向数据库添加新用户的表单。这一切都完美，但我想要的是可以一次添加多个用户，所以当我点击“添加另一个用户”时，它会出现另一个用于添加用户的字段列表。我不知道如何解释它，所以我会添加一些图片：

这里是我，当我尝试添加用户：

而且，我想要的是当我点击“添加其他用户”，给我看场的另一个列表中的其他下，像这样：

所以，如果我点击五次，它会告诉我五“形式”和原来的：

我发现this question它显示了如何用不同的例子做到这一点，但我的代码有一张桌子和一个形式，所以我不知道多少究竟是如何做到这一点。这里是我的表单代码：

<table id="minimalist-table"> 
    <tr><th>Username</th><th>Password</th><th>Mail</th><th>Language</th><th>Sex</th></tr> 
    <form method="post" action="?action=users&sa=add"> 
    <tr> 
    <td><input type="text" name="username[]" required="required"></td> 
    <td><input type="password" name="password[]" required="required"></td> 
    <td><input type="email" name="email[]" required="required"></td> 
    <td><select name="language[]"> 
    <option value="en_US">English</option> 
    <option value="es_ES">Spanish</option> 
    </select></td> 
    <td><select name="sex[]"> 
    <option value="Male">Male</option> 
    <option value="Female">Female</option> 
    </select></td> 
    </tr> 
    <tr><td><input type="submit" value="Submit"> </td></tr> 
    </form></table> 

我的价值观与阵列（如name="email[]"），因为它是我能处理数据库的多个元素的方式......

我试图把所有这些代码到一个函数，所以当我调用该函数时，它会将另一组字段添加到表单中，但我不知道如何使用JavaScript ...
谢谢！

Answer 1

在这种情况下，我通常会创建一个隐藏的“模板”元件/排包含应添加的HTML：

<table id="minimalist-table"> 
... 
<tr class="template" style="display:none"> 
... all fields ... 
</tr> 
<tr class="submit_row"><td><input type="submit" value="Submit"> </td></tr> 

所以在JavaScript可以做到这一点得到了HTML（和禁用隐藏输入）：

var row_template = $('#minimalist-table > .template').html().find(':input').prop('disabled', true) 

完成的代码看起来像这样（未经）

var row_template = $('#minimalist-table > .template').html() 
$('#add_row').on('click', function(){ 
    $('#minimalist-table .submit_row').before(row_template); 
});