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中的ArrayBuffer详细介绍
Dec 08 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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 编程的 5个良好习惯
2009/02/20 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
JS文本框默认值处理详解
2013/07/10 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
Python函数返回值实例分析
2015/06/08 Python
Python实现多线程的两种方式分析
2018/08/29 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python实现视频读取和转化图片
2019/12/10 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
市场营销毕业生自荐信
2013/11/23 职场文书
访谈节目策划方案
2014/05/15 职场文书
个人考核材料
2014/05/15 职场文书
临时租车协议范本
2014/09/23 职场文书
遗失说明具结保证书
2015/02/26 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python