最近教學過程中需要實現form表單中的input文本框在用戶點擊按鈕時自動生成新的文本框，在完成數據填寫之後通過ajax批量將填寫的信息存儲到數據庫中。每一行文本框對應數據庫表中的記錄。初始狀態如下圖：

文本框組合（行）

如上圖，前端用戶需要藉助文本框批量提交數據，每一行有5個文本框，對應後臺表中的一條記錄。用戶可填寫數據，完成填寫後點擊添加，頁面自動添加新的一行文本框。效果如下：

動態文本框行添加生成效果

上圖給出了點擊添加之後的新效果，整個文檔HTML代碼描述如下：

表單代碼

代碼描述如上，文本框以label標籤為基礎進行分組，每5個為一行，所有的input文本框具有相同的class名稱。

解決措施：

針對待解決的問題，設計採用JavaScript DOM文檔對象模型提供的方法，將表單看成結點，調用附加結點方法實現動態結點的添加。主要涉及使用到的方法函數如下：

(1) getElementById()方法

獲取元素（結點）函數，通過使用HTML標記對應的ID標籤值獲取該元素，返回元素對象，可進一步執行元素的操作。

(2) createElement()方法

創建結點元素方法，該方法用於實現動態創建新結點元素，為下一步添加新結點奠定基礎。

(3) setAttribute()方法

該方法主要用於實現結點屬性的設置，函數需要提供兩個參數，分別為屬性名稱與屬性值。

(4) appendChild()方法

附加結點方法，該方法主要用於將新創建結點附加到指定結點的尾部。

該方法主要用於返回HTML文檔中具有相同Class名字的一組元素的集合，並可通過下標訪問其中的每一個元素。

為將前端表單文本框組合與數據表中行對應，涉及採用插入數據類insetv實現對每一行文本框數據進行存儲。該類設計描述如下：

行數據（記錄）類

每一行使用實例化的insetv進行數據存儲，針對多行的情況，設計採用數組對每一行進行存儲。即數組的每一個元素都是insetv對象。最終實現數組按照數據行對填寫信息進行存儲。然後自定義兩個按鈕的onclick消息響應函數，實現存儲數據與動態表格生成。其中addRow用於生成新的行，該函數實現代碼描述如下：

添加文本框（行）函數

定義insert方法用於獲取表單所有文本框填寫的信息，並採用數組對獲取的信息進行存儲，數組每一個元素為insetv對象，對應每一條記錄。Insert方法實現描述如下圖所示：

插入數據操作函數

本例所有的文本框行都是JS編碼實現，因此需要在window對象的onload實踐中調用addRows方法實現初始化時生成第一行。實現代碼如下：

初始化首行函數

為方便測試演示與展示，我們將獲取的數據直接在本頁面進行展示，實際測試過程描述如下動圖所示：

動態實現效果展示

在插入操作過程我們使用console.log()對輸入數據對應數組進行了控制檯的輸出。輸出結果如下：

數據獲取存儲結果

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯繫作者，共同探討。期待大家關注！如需案例完整代碼請關注並私信，該案例相關文章鏈接如下：