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 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
js 鼠标点击事件及其它捕获
Jun 04 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
银行毕业实习自我鉴定
2013/09/19 职场文书
生物化学研究助理员求职信
2013/10/09 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
经典促销广告词大全
2014/03/19 职场文书
中介业务员岗位职责
2014/04/09 职场文书
实习单位鉴定评语
2014/04/26 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
倡议书的格式写法
2015/04/28 职场文书
大学新生入学感想
2015/08/07 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
安全生产协议书
2016/03/22 职场文书