js簡單實現(xiàn)表單中點擊按鈕動態(tài)增加輸入框數(shù)量的方法

更新時間：2015年08月18日 15:51:25 作者：企鵝

這篇文章主要介紹了js簡單實現(xiàn)表單中點擊按鈕動態(tài)增加輸入框數(shù)量的方法,涉及javascript鼠標點擊事件及insertAdjacentHTML方法的相關使用技巧,需要的朋友可以參考下

本文實例講述了js簡單實現(xiàn)表單中點擊按鈕動態(tài)增加輸入框數(shù)量的方法。分享給大家供大家參考。具體如下：

這里演示表單中點擊按鈕動態(tài)增加輸入框數(shù)量的方法，默認是沒有輸入框，點擊按鈕之后，輸入框會不斷的增加，每點擊一次，增加一個，覺得挺不錯吧，希望對你有所幫助。

運行效果如下圖所示：

在線演示地址如下：

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>點擊按鈕動態(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>

希望本文所述對大家的javascript程序設計有所幫助。

您可能感興趣的文章:

微信小程序開發(fā)之點擊按鈕退出小程序的實現(xiàn)方法
這篇文章主要介紹了微信小程序開發(fā)之點擊按鈕退出小程序的實現(xiàn)方法,本恩通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
最佳JS代碼編寫的14條技巧
寫任何編程代碼，不同的開發(fā)者都會有不同的見解。但參考一下總是好的，下面是來自Javascript Toolbox發(fā)布的14條最佳JS代碼編寫技巧，Sofish翻譯(1,2)。
2011-01-01
Js之軟鍵盤實現(xiàn)(js源碼)
Js之軟鍵盤實現(xiàn)(js源碼)...
2007-01-01
uniapp使用高德地圖的超詳細步驟
使用uni-app框架開發(fā)微信小程序,可以使用高德地圖開發(fā)地圖選點、搜索位置、定位、獲取詳細的地址信息、碼值等信息,下面這篇文章主要給大家介紹了關于uniapp使用高德地圖的超詳細步驟,需要的朋友可以參考下
2022-12-12
在layer彈層layer.prompt中,修改placeholder的實現(xiàn)方法
今天小編大家分享一篇在layer彈層layer.prompt中,修改placeholder的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
淺析Javascript中bind()方法的使用與實現(xiàn)
下面小編就為大家?guī)硪黄獪\析Javascript中bind()方法的使用與實現(xiàn)。小編覺得挺
2016-05-05
js相冊效果代碼(點擊創(chuàng)建即可)
利用js 書寫的相冊代碼，點擊創(chuàng)建即可看到效果，感興趣的朋友可以參考下哈，希望對你學習jquery有所幫助
2013-04-04
JS實現(xiàn)簡單的拖拽效果
拖拽是前端實現(xiàn)中比較常用的一種效果, HTML5 提供了較為強大的拖拽 API 支持,今天我們來實現(xiàn)一個簡單的拖拽效果,需要的朋友可以參考下
2023-09-09
理解JavaScript原型鏈
簡單說一說對JavaScript原型鏈的理解,希望對大家學習JavaScript原型鏈有所幫助，具體內(nèi)容如下
2016-10-10
同步文本框內(nèi)容JS代碼實現(xiàn)
這篇文章主要為大家詳細介紹了JS實現(xiàn)同步文本框內(nèi)容的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08