基于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 相关文章推荐
jQuery对象[0]是什么含义?
Jul 31 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
javascript快速排序算法详解
Sep 17 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
Javascript中的async awai的用法
May 17 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 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读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
javascript工厂方式定义对象
2014/12/26 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
python查找第k小元素代码分享
2013/12/18 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
python中import学习备忘笔记
2017/01/24 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
房产销售经理职责
2013/12/20 职场文书
宿舍违规检讨书
2014/01/12 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
北京英文导游词
2015/02/12 职场文书
2015中秋祝酒词
2015/08/12 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
go开发alertmanger实现钉钉报警
2021/07/16 Golang
Python必备技巧之函数的使用详解
2022/04/04 Python
python数字图像处理实现图像的形变与缩放
2022/06/28 Python