基于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 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
Ext.MessageBox工具类简介
Dec 10 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
loading动画特效小结
Jan 22 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
vue路由教程之静态路由
Sep 03 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 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中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
js返回顶部实例分享
2016/12/21 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
python数据结构之链表详解
2017/09/12 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python递归函数绘制分形树的方法
2018/06/22 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
Internet体系结构
2014/12/21 面试题
销售代表求职自荐信
2013/10/01 职场文书
会计电算化应届生求职信
2013/11/03 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
校车安全管理责任书
2015/05/11 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
高二化学教学反思
2016/02/22 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle