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 应用代码 方便的排序功能
Feb 06 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
antd table按表格里的日期去排序操作
Nov 17 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
杏林同学录(七)
2006/10/09 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
Python多线程和队列操作实例
2015/06/21 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
Python实现序列化及csv文件读取
2020/01/19 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
九年级政治教学反思
2014/02/06 职场文书
房产委托公证书
2014/04/08 职场文书
大气污染防治方案
2014/05/19 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
工作检讨书500字
2014/10/19 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript