基于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弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
js获取checkbox值的方法
Jan 28 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
JS实现简易计算器
Feb 14 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 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
解析MySql与Java的时间类型
2013/06/22 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
php构造函数实例讲解
2013/11/13 PHP
Yii学习总结之安装配置
2015/02/22 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
PyQt QMainWindow的使用示例
2021/03/24 Python
创业计划书中包含的9个方面
2013/12/26 职场文书
股份转让协议书
2014/04/12 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
无线电知识基础入门篇
2022/02/18 无线电
Promise静态四兄弟实现示例详解
2022/07/07 Javascript