基于Jquery的动态添加控件并取值的实现代码


Posted in Javascript onSeptember 24, 2010
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Jquery动态控件</title> 
<script src="jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
var i = 2; 
$('#addText').click(function() { 
if (i < 9) { 
$('#main').append('<div><input type="text" name="text" + i + ""/> 











<a href="#" class="del-text">del</a></div>'); 
i++; 
} else { 
alert("最多只能添加8个"); 
} 
}); 
$('.del-text').live('click',function(){ 
$(this).parent().remove(); 
i--; 
}); 
}); 
</script> 
</head> 
<body> 
<div id="main"> 
<div> 
<input type="text" name="text1" /> 
</div> 
</div> 
<a id="addText" href="#">添加文本框</a> 
</body> 
</html>

先把前台的整理出来,项目临时有需求,先去忙了,稍后发后台取值的方法...
Javascript 相关文章推荐
使用js复制链接中的部分文字的方法
Jul 30 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
JavaScript显式数据类型转换详解
Mar 18 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
封装的原生javascript弹出层代码
Sep 24 #Javascript
js最简单的拖拽效果实现代码
Sep 24 #Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 #Javascript
IE无法设置短域名下Cookie
Sep 23 #Javascript
Javascript中获取出错代码所在文件及行数的代码
Sep 23 #Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 #Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 #Javascript
You might like
新闻分类录入、显示系统
2006/10/09 PHP
php5 pdo新改动加载注意事项
2008/09/11 PHP
关于svn冲突的解决方法
2013/06/21 PHP
php汉字转拼音的示例
2014/02/27 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
python IP地址转整数
2020/11/20 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
青春奉献演讲稿
2014/05/08 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
pandas中对文本类型数据的处理小结
2021/11/01 Python