js简单实现表单中点击按钮动态增加输入框数量的方法


Posted in Javascript onAugust 18, 2015

本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法。分享给大家供大家参考。具体如下:

这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助。

运行效果如下图所示:

js简单实现表单中点击按钮动态增加输入框数量的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击按钮动态增加输入框数量</title>
</head>
<body>
<script>var i=1</script>
<input type=button onclick="document.body.insertAdjacentHTML('beforeEnd','<input type=text name='+i+' value='+i+++'> ')" value=添加>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 #Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 #Javascript
js+css实现上下翻页相册代码分享
Aug 18 #Javascript
javascript实现图片上传前台页面
Aug 18 #Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 #Javascript
jQuery实现的漂亮表单效果代码
Aug 18 #Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 #Javascript
You might like
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
python文件名和文件路径操作实例
2017/09/29 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python随机数函数代码实例解析
2020/02/09 Python
python 实现两个npy档案合并
2020/07/01 Python
Python如何批量生成和调用变量
2020/11/21 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
纽约手袋品牌:KARA
2018/03/18 全球购物
软件测试英文面试题
2012/10/14 面试题
院领导写的就业推荐信
2014/03/09 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
2014年平安夜寄语
2014/12/08 职场文书
2015年复活节活动总结
2015/02/27 职场文书
法定代表人资格证明书
2015/06/18 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android