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>
by hacket
