js簡(jiǎn)單實(shí)現(xiàn)表單中點(diǎn)擊按鈕動(dòng)態(tài)增加輸入框數(shù)量的方法
更新時(shí)間：2015年08月18日 15:51:25 作者：企鵝
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)表單中點(diǎn)擊按鈕動(dòng)態(tài)增加輸入框數(shù)量的方法,涉及javascript鼠標(biāo)點(diǎn)擊事件及insertAdjacentHTML方法的相關(guān)使用技巧,需要的朋友可以參考下
本文實(shí)例講述了js簡(jiǎn)單實(shí)現(xiàn)表單中點(diǎn)擊按鈕動(dòng)態(tài)增加輸入框數(shù)量的方法。分享給大家供大家參考。具體如下：
這里演示表單中點(diǎn)擊按鈕動(dòng)態(tài)增加輸入框數(shù)量的方法，默認(rèn)是沒(méi)有輸入框，點(diǎn)擊按鈕之后，輸入框會(huì)不斷的增加，每點(diǎn)擊一次，增加一個(gè)，覺(jué)得挺不錯(cuò)吧，希望對(duì)你有所幫助。
運(yùn)行效果如下圖所示：
在線演示地址如下：
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>點(diǎn)擊按鈕動(dòng)態(tài)增加輸入框數(shù)量</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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)立體式數(shù)字動(dòng)態(tài)增加（animate方法）
- jQuery實(shí)現(xiàn)立體式數(shù)字滾動(dòng)條增加效果
- js實(shí)現(xiàn)增加數(shù)字顯示的環(huán)形進(jìn)度條效果
- JavaScript數(shù)組Array對(duì)象增加和刪除元素方法總結(jié)
- 為jquery的ajaxfileupload增加附加參數(shù)的方法
- Apache增加最大連接數(shù)的方法
- php 數(shù)組操作(增加，刪除，查詢，排序)等函數(shù)說(shuō)明
- MYSQL數(shù)據(jù)庫(kù)中的現(xiàn)有表增加新字段（列）
- jquery對(duì)table中各數(shù)據(jù)的增加、保存、刪除操作示例
- 數(shù)據(jù)庫(kù)中兩張表之間的數(shù)據(jù)同步增加、刪除與更新實(shí)現(xiàn)思路
- json數(shù)據(jù)處理技巧(字段帶空格、增加字段、排序等等)
- Jquery中增加參數(shù)與Json轉(zhuǎn)換代碼
- JavaScript實(shí)現(xiàn)數(shù)值自動(dòng)增加動(dòng)畫
相關(guān)文章
微信小程序開發(fā)之點(diǎn)擊按鈕退出小程序的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序開發(fā)之點(diǎn)擊按鈕退出小程序的實(shí)現(xiàn)方法,本恩通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
寫任何編程代碼，不同的開發(fā)者都會(huì)有不同的見解。但參考一下總是好的，下面是來(lái)自Javascript Toolbox發(fā)布的14條最佳JS代碼編寫技巧，Sofish翻譯(1,2)。2011-01-01
Js之軟鍵盤實(shí)現(xiàn)(js源碼)...2007-01-01
使用uni-app框架開發(fā)微信小程序,可以使用高德地圖開發(fā)地圖選點(diǎn)、搜索位置、定位、獲取詳細(xì)的地址信息、碼值等信息,下面這篇文章主要給大家介紹了關(guān)于uniapp使用高德地圖的超詳細(xì)步驟,需要的朋友可以參考下2022-12-12
在layer彈層layer.prompt中,修改placeholder的實(shí)現(xiàn)方法
今天小編大家分享一篇在layer彈層layer.prompt中,修改placeholder的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
淺析Javascript中bind()方法的使用與實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇淺析Javascript中bind()方法的使用與實(shí)現(xiàn)。小編覺(jué)得挺2016-05-05
js相冊(cè)效果代碼(點(diǎn)擊創(chuàng)建即可)
利用js 書寫的相冊(cè)代碼，點(diǎn)擊創(chuàng)建即可看到效果，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)jquery有所幫助2013-04-04
拖拽是前端實(shí)現(xiàn)中比較常用的一種效果, HTML5 提供了較為強(qiáng)大的拖拽 API 支持,今天我們來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的拖拽效果,需要的朋友可以參考下2023-09-09
簡(jiǎn)單說(shuō)一說(shuō)對(duì)JavaScript原型鏈的理解,希望對(duì)大家學(xué)習(xí)JavaScript原型鏈有所幫助，具體內(nèi)容如下2016-10-10
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)同步文本框內(nèi)容的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08