基于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 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
封装的原生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
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
javascript 获取网页参数系统
2008/07/19 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
Javascript调用C#代码
2011/01/17 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
使用百度地图实现地图网格的示例
2018/02/06 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
JS实现多功能计算器
2020/10/28 Javascript
Numpy之random函数使用学习
2019/01/29 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
Django models.py应用实现过程详解
2019/07/29 Python
python生成任意频率正弦波方式
2020/02/25 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
教师一帮一活动总结
2014/07/08 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
师德师风个人整改措施
2014/10/27 职场文书
员工担保书范本
2015/09/22 职场文书