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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
vue组件添加事件@click.native操作
Oct 30 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
Linux下php5.4启动脚本
2014/08/03 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
jQuery使用手册之一
2007/03/24 Javascript
js form action动态修改方法
2008/11/04 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python学习入门之区块链详解
2017/07/25 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
关于Python解包知识点总结
2020/05/05 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
审计工作个人的自我评价
2013/12/25 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
2015年元旦活动总结
2014/05/09 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
特此通知格式
2015/04/27 职场文书
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python