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 相关文章推荐
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
Javascript继承机制详解
May 30 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
vue实现登录拦截
Jun 29 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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 Stream_*系列函数
2010/08/01 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php 启动报错如何解决
2014/01/17 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
Python实现的一个简单LRU cache
2014/09/26 Python
Python爬取读者并制作成PDF
2015/03/10 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
幼儿园元旦家长感言
2014/02/27 职场文书
法律系毕业生求职信
2014/05/28 职场文书
私人委托书格式
2014/09/10 职场文书
技术股份合作协议书
2014/10/05 职场文书
外国人来华邀请函
2015/01/31 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书