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 相关文章推荐
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
js实现秒表计时器
Dec 16 Javascript
JS字符串和数组如何实现相互转化
Jul 02 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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
简单的三步vuex入门
2018/05/20 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Django 多环境配置详解
2019/05/14 Python
详解numpy的argmax的具体使用
2019/05/27 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
python不同版本的_new_不同点总结
2020/12/09 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
法人委托书范本
2014/09/15 职场文书
公司更名通知函
2015/04/24 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
铁人观后感
2015/06/16 职场文书