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 框架使用教程 AJAX篇
Oct 11 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
Javascript模块化机制实现原理详解
Apr 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 选项及相关信息函数库
2006/12/04 PHP
dedecms系统常用术语汇总
2007/04/03 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
分页栏的web标准实现
2011/11/01 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
python 如何快速复制序列
2020/09/07 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
python中温度单位转换的实例方法
2020/12/27 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
五分钟演讲稿
2014/04/30 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
七夕情人节促销方案
2014/06/07 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
mysql数据库实现设置字段长度
2022/06/10 MySQL
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技