基于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 动态扩展对象之另类视角
May 25 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
JavaScript一元正号运算符示例代码
Jun 30 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 5.0 Pear安装方法
2006/12/06 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
重定向实现代码
2006/11/20 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
党员个人党性分析材料
2014/12/18 职场文书
公司年会主持词范文!
2019/05/07 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS