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万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章