jQuery练习5--动态增加用户名邮箱

 

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 5      <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 6   </head>
 7   <body>
 8       <table id="tableID" border="1" align="center" width="60%">
 9           <thead>
10               <tr>    
11                   <th>用户名</th>
12                   <th>邮箱</th>
13                   <th>操作</th>
14               </tr>
15           </thead>
16           <tbody id="tbodyID">
17               <!-- 动态增加行 -->
18           </tbody>
19       </table>
20       <hr/>
21       用户名：<input type="text" id="usernameID"/>
22       邮箱：  <input type="text" id="emailID"/>
23               <input type="button" value="增加" id="addID"/>
24   </body>
25   <script type="text/javascript">
26           
27     //为增加按钮添加事件
28     $("#addID").click(function(){
29         
30           //1、定位用户名和邮箱，并将其值取出来
31         var username = $("#usernameID").val();
32         var email = $("#emailID").val();
33         //2、创建删除按钮并为之添加事件处理
34         var $delete = $("<input />").attr("type","button").attr("value","删除");
35         $delete.click(function(){
36             $tr = $(this).parent().parent();
37             $tr.remove();
38         });
39         //创建tr,td
40         var $tr = $("<tr></tr>");
41         var $td1 = $("<td></td>").html(username);
42         var $td2 = $("<td></td>").html(email);
43         var $td3 =  $("<td></td>").append($delete);
44         $tr.append($td1);
45         $tr.append($td2);
46         $tr.append($td3);
47         $("#tbodyID").append($tr);
48     });
49   </script>
50 </html>

 

 

 

posted @ 2013-05-10 19:11  hacket520  阅读(276)  评论(0)  编辑  收藏  举报