jquery添加用户事例

浏览数：20 / 时间：2015年06月09日

 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.8.2.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="passwordID"/>
23               <input type="button" value="增加" id="addID"/>
24   </body>
25   <script type="text/javascript">
26       $("#addID").click(function(){
27           //获取用户名和密码
28           var username = $("#usernameID").val();
29           var password = $("#passwordID").val();
30           //去空格
31           username = $.trim(username);
32           password = $.trim(password);
33           //判断
34           if(username!=null && password!=null && username.length>0 && password.length>0){
35             //创建tr对象
36             var $tr = $("<tr></tr>")
37             //创建3个td对象
38             var $td1 = $("<td>" + username + "</td>");
39             var $td2 = $("<td>" + password + "</td>");
40             var $td3 = $("<td></td>");
41             //创建按钮
42             var $delButton = $("<input type=‘button‘ value=‘删除‘>");
43             
44             //将按钮添加到td对象，形成父子关系
45             $td3.append($delButton);
46             //为按钮添加单击事件
47             $delButton.click(function(){
48                  $tr.remove();
49             });
50             //将td对象添加到tr对象，形成父子关系
51             $tr.append($td1);
52             $tr.append($td2);
53             $tr.append($td3);
54             //将tr对象添加到tbody对象，形成父子关系
55             $("#tbodyID").append($tr);
56             //清空原用户名和密码框
57             $("#usernameID").val("");
58             $("#passwordID").val("");
59           }else{
60             window.alert("用户名和密码必填");              
61           }
62       });
63   </script>
64 </html>