js简单实现表单中点击按钮动态增加输入框数量的方法_javascript技巧

本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法。分享给大家供大家参考。具体如下:

这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助。

运行效果如下图所示:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-table-input-button-add-codes/

具体代码如下:

<!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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 输入框
, 表单
, 点击按钮
动态增加
表单输入框、表单输入框对齐、html表单输入框大小、form表单输入框对齐、表单输入框记忆功能,以便于您获取更多的相关知识。

时间: 2024-10-31 02:04:51

js简单实现表单中点击按钮动态增加输入框数量的方法_javascript技巧的相关文章

Form表单中点击按钮增加一行,并在后端用PHP处理

问题描述 Form表单中点击按钮增加一行,并在后端用PHP处理 一个简单的form表单,想要实现点击按钮之后就添加一行.(类似于部分网站的添加地址的功能) 然后submit提交表单之后在后端用PHP如何处理. 求大神写一段简单的代码! 解决方案 <?php $addr=$_POST["addr"]; if(isset($addr)){ $len=count($addr); for($x=0;$x<$len;$x++) { echo $addr[$x]; echo "

js简单获取表单中单选按钮值的方法_javascript技巧

本文实例讲述了js简单获取表单中单选按钮值的方法.分享给大家供大家参考,具体如下: HTML部分如下: <form> <tr bgcolor="#FFFFFF"> <td width="84" height="23" rowspan="3" align="center" valign="middle" bordercolor="#999999&qu

js 点击a标签 获取a的自定义属性方法_javascript技巧

今天项目上遇到一个问题,需要在点击a标签时,将完整的内容显示出来 原先是想用jquery的click方法 <a ownattr="--" onClick="showDetail(this)">哈哈</a> 在jquery的click方法中将this的ownattr属性赋值给完整内容的div标签 然而这却一直行不通 一阵研究后发现,原来项目框架是用jquery ajax获取后台列表信息的,页面在执行到click方法时,ajax还没完成 随后决定

js鼠标点击图片实现随机变换图片的方法_javascript技巧

本文实例讲述了js鼠标点击图片实现随机变换图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>鼠标点击图片即可随机变换图片</title> <body bgcolor="#fef4d9" OnLoad="swapPic()"> <center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var ra

JS简单限制textarea内输入字符数量的方法_javascript技巧

本文实例讲述了JS简单限制textarea内输入字符数量的方法.分享给大家供大家参考.具体如下: 这里演示JS限制一个area内的字符不能超过255,多余则截取. 代码如下: <script> function getStringUTFLength(str) { var value = str.replace(/[\u4e00-\u9fa5]/g," "); //将汉字替换为两个空格 return value.length; } function leftUTFString

JS实现点击上移下移LI行数据的方法_javascript技巧

本文实例讲述了JS实现点击上移下移LI行数据的方法.分享给大家供大家参考.具体如下: 这里演示JavaScript排序功能,点击按钮实现数据的上移和下称,一共有两组测试效果,上组采用箭头图标控制的方式,更美观,下组是直接使用文字,根据你的需要自行选择.myList为ul的id值,m为0显示文字,m为1显示图片,mO.mT为文字或图片内容. 演示效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

js实现鼠标点击文本框自动选中内容的方法_javascript技巧

本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再去选择,省去了一些麻烦,提高了输入效率,用户肯定会喜欢这功能,那么实现的方法是怎么样呢?通过本代码你就搞明白了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-click

JS实现鼠标点击展开或隐藏表格行的方法_javascript技巧

本文实例讲述了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/xhtm

js实现点击图片改变页面背景图的方法_javascript技巧

本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0"> <script language=&qu