使用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

在这种情况下，我通常会创建一个隐藏的＆＃34;模板＆＃34;包含应添加的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);
});