使用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);
});