基于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 相关文章推荐
提取字符串中年月日的函数代码
Nov 05 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
JavaScript 基本概念
Jan 20 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 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.ini中date.timezone设置分析
2011/07/29 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
关于PHP开发的9条建议
2015/07/27 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python 实现倒排索引的方法
2018/12/25 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
Python项目打包成二进制的方法
2020/12/30 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
比利时香水网上商店:NOTINO
2018/03/28 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
《搭石》教学反思
2014/04/07 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
酒店前台辞职书
2015/02/26 职场文书