JavaScript Formset（表單集）是一個功能強大的JavaScript庫，可以實現動態添加或刪除HTML表單字段。這個庫非常有用，特別是對于需要設定數量不確定的表單輸入字段的網站而言。在這篇文章中，我們將探討JavaScript Formset的主要功能，并提供使用方法和示例以幫助您快速上手。
當您需要將多個表單字段放在一個表格或列表中時，通常會使用JavaScript Formset。例如，在訂購商品時，您可能需要添加多種產品，以及每種產品的數量和規格。所有這些信息都需要提交到服務器以進行處理。如果您希望用戶能夠輕松地添加或刪除這些產品信息，那么JavaScript Formset就是您所需要的庫。
使用JavaScript Formset時，您需要定義一個HTML表單來表示每種產品，然后根據需要動態添加或刪除這些表單。以下是一個非常簡單的示例，其中將演示如何使用JavaScript Formset來動態添加和刪除表單字段：
<!-- 在您的HTML文檔中引用jQuery庫 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引用JavaScript Formset庫 -->
<script src="https://cdn.jsdelivr.net/npm/django-formset-js@0.2.2/dist/formset.min.js"></script>
<!-- 添加表單模板 -->
<div id="product-form-template" style="display:none;">
<table>
<tr>
<td><input type="text" name="product[]"></td>
<td><input type="text" name="quantity[]"></td>
<td><input type="text" name="price[]"></td>
<td><a href="javascript:void(0);" class="remove-form-row">刪除</a></td>
</tr>
</table>
</div>
<!-- 添加表單控制器 -->
<div id="formset">
<table id="formset-table">
<thead>
<tr>
<th>產品名稱</th>
<th>數量</th>
<th>價格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<a href="javascript:void(0);" id="add-form-row">新增產品</a>
</div>
<!-- 為表單控制器添加Javscript事件 -->
<script>
$(function() {
var formset = $('#formset').formset({
form_template: '#product-form-template',
add_button: '#add-form-row',
delete_button: '.remove-form-row',
});
});
</script>以上代碼非常簡短但功能強大。它根據jQuery和JavaScript Formset庫提供了動態添加或刪除HTML表單字段所需的所有內容。我們將一一解釋它的內容。
首先，我們需要為我們的HTML文檔添加jQuery庫。它可以從Google文檔庫中獲取，并通過