码迷,mamicode.com
首页 > Web开发 > 详细

HTML+jQuery实现动态添加<input>输入框

时间:2016-04-05 12:33:43      阅读:2967      评论:0      收藏:0      [点我收藏+]

标签:

一个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 });

 

HTML+jQuery实现动态添加<input>输入框

标签:

原文地址:http://www.cnblogs.com/huyd/p/5354225.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!