JQuery动态添加删除行并存储数据
2013-07-07 17:40
447 查看
一个用户可能有多个邮件地址,并且不确定个数。一开始只是固定输入2个地址,今天进行了改善,变成任意数目的输入然后存储。具体实现见下。
addEmail函数使用JQuery的append()函数,将TR标签加入邮件地址的尾部,如果点击新加行的小叉子(removeEmail(this)),则调用removeEmail(e)函数:$(e).parents(“tr”).remove();去掉该行。
很简单吧,这里要注意一点,新的email输入框,他的name和id要与之前的不同,所以在页面加载时,设定了变量emailNum,用它来为每个name和id加入标识,就像这样 name=’email”+emailNum+”‘。
为什么要在最后组装,而不在用户操作时进行js的变换呢,我想最后组装可以减少很多的工作量和少考虑很多情况吧。。。
这样在新页面中,就可以将这个字符串改装成一个数组,拿到表单提交的数据,随后对数组进行循环,将数据循环的插入到数据库中了。
这里有也有一个要注意的地方,就是在提交后的DONE页面时,如何才能拿到这些不确定名字的name的值呢?好比,有可能用户添加了8个邮件地址,但是删除了1-7个,只保留了最后一个,那么此时这个输入框的name是,email8,提交后的页面怎么能知道他的name是email8呢?在这里我用了$$这个动态变量的方法,循环提交的数组,得到不同的变量名,然后对动态这些变量名,得到POST的值。就得到这些POST的数据啦。
http://enjoypixels.com/blogUpload/pieceCode.txt
前端
默认会出现两行电子邮件的输入栏,如果用户点击“+添加地址”,调用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
相关文章推荐
- Jquery 实现动态添加table tr 和删除tr 以及checkbox的全选 和 获取添加TR删除TR后的数据
- 使用jQuery动态创建一个表格(根据用户输入的内容添加一行数据,并且能逐行删除)
- jQuery - 动态添加、删除form表单项(附:新增项数据无法提交问题解决)
- 关于从后台传来的json数据,使用jquery动态展现所有的item,给每个item添加删除功能
- jquery动态添加删除一行数据示例
- jquery动态添加删除一行数据
- jquery动态添加删除一行数据示例
- jquery 动态添加一行数据,支持动态删除
- Android25闹钟项目——ArrayAdapter动态添加数据,显示数据,删除数据SharedPreferences存储数据,读取数据
- JQuery动态添加和删除表格行的方法
- Jquery 动态添加删除元素 用js添加的元素无法删除问题
- 很简单的数据结构:链表线性存储的创建、取数据、数据添加、数据插入、数据删除
- JQuery动态给table添加、删除行 改进版
- jQuery动态添加、删除表格行
- jQuery实现的简单动态添加、删除表格功能示例
- jquery动态添加删除div
- android ListView内数据的动态添加与删除
- javascript jquery 动态添加删除行 (兼容所有浏览器)
- JavaScript以及Jquery动态添加多选框值以及获取数据的学习记录
- 存储过程执行删除重复数据、动态执行sql、拼接sql