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