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游戏之是男人就下100层代码打包
Nov 08 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
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面向对象public private protected 访问修饰符
2013/06/30 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
浅谈json_encode用法
2015/03/05 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
python的pip有什么用
2020/06/17 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
jupyter 添加不同内核的操作
2021/02/06 Python
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
小学生元旦感言
2014/02/26 职场文书
天网工程实施方案
2014/03/26 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js