JQuery動態添加刪除行並存儲數據

一個用戶可能有多個郵件地址,並且不確定個數。一開始只是固定輸入2個地址,今天進行了改善,變成任意數目的輸入然後存儲。具體實現見下。

前端

 

默認會出現兩行電子郵件的輸入欄,如果用戶點擊“+添加地址”,調用addEmail()函數:$(“#email-table”).append(emailCode);

addEmail函數使用JQuery的append()函數,將TR標籤加入郵件地址的尾部,如果點擊新加行的小叉子(removeEmail(this)),則調用removeEmail(e)函數:$(e).parents(“tr”).remove();去掉該行。

很簡單吧,這裏要注意一點,新的email輸入框,他的name和id要與之前的不同,所以在頁面加載時,設定了變量emailNum,用它來爲每個name和id加入標識,就像這樣 name=’email”+emailNum+”‘。

後端

怎麼才能將增加的數據,在表單提交後傳遞給新的頁面呢?我在用戶點擊submit的時候,將這些最後還存在的輸入框的id,組裝成這樣的字符串,如1,2,3,8

爲什麼要在最後組裝,而不在用戶操作時進行js的變換呢,我想最後組裝可以減少很多的工作量和少考慮很多情況吧。。。

這樣在新頁面中,就可以將這個字符串改裝成一個數組,拿到表單提交的數據,隨後對數組進行循環,將數據循環的插入到數據庫中了。

這裏有也有一個要注意的地方,就是在提交後的DONE頁面時,如何才能拿到這些不確定名字的name的值呢?好比,有可能用戶添加了8個郵件地址,但是刪除了1-7個,只保留了最後一個,那麼此時這個輸入框的name是,email8,提交後的頁面怎麼能知道他的name是email8呢?在這裏我用了$$這個動態變量的方法,循環提交的數組,得到不同的變量名,然後對動態這些變量名,得到POST的值。就得到這些POST的數據啦。

 

 

http://enjoypixels.com/blogUpload/pieceCode.txt

發佈了23 篇原創文章 · 獲贊 4 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章