HTML+jQuery實現動態添加輸入框


一個html文件和一個js文件配合,在html文件里引入js文件,用jQuery為<a>標簽添加一個點擊事件,事件里只需寫一個append函數就可以。

HTML源碼:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-2.2.2.min.js"></script>
 7     <script src="add.js"></script>
 8 </head>
 9 <body>
10     <form method="post" action="">
11         專題列表:<a href="#" id="AddMoreTextBox" >添加輸入框</a>
12                   <br/>
13         <div id="InputsWrapper">
14                   <input type="text" name="news[]" id="news_1" value="Text 1"><br/><br/>
15                   <input type="text" name="news[]" id="news_2" value="Text 2"><br/><br/>
16                   <input type="text" name="news[]" id="news_3" value="Text 3"><br/><br/>
17             </div>
18                   <input type="submit" name="edit" value="提交">
19         </form>
20 </body>
21 </html>

jQuery源碼:

1 $(document).ready(function () {
2     var InputCount=3;
3     $("#AddMoreTextBox").click(function (e)
4     {
5             InputCount++;
6             $("#InputsWrapper").append('<label></label><input type="text" name="news[]" id="news_' + InputCount + '" value="Text '+ InputCount +'"/><br/><br/>');
7     });
8 });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM