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>