基于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 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
Vue登录主页动态背景短视频制作
Sep 21 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使用codebase生成随机数
2014/03/25 PHP
使用PHP编写发红包程序
2015/07/22 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
详解Vue源码中一些util函数
2019/04/24 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
英文感谢信格式
2015/01/21 职场文书
玄武湖导游词
2015/02/05 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书