效果图：
实现代码：
1 <%@ page language="java" import="java.util.*" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <title>11</title> 7 <style type="text/css"> 8 body {height:100%;width:50%;margin:50px auto;padding:20px;border:1px solid black;text-align:center} 9 table{border:5px solid grey;margin:0 auto;width:500px;height:300px;background:#11fadd;text-align:center} 10 table tr td{border:1px solid #abcddd;} 11 </style> 12 <script type="text/javascript" src="../js/jquery-1.11.0.js"> 13 </script> 14 <script language="javascript"> 15 $(document).ready(function() 16 { 17 $("#add").click(function (){ 18 //获取用户输入的用户名 19 var username=$("#username").val(); 20 var email=$("#email").val(); 21 var phone=$("#phone").val(); 22 alert(username+email+phone); 23 //一步到位,后面添加事件的时候会失败 24 /* 25 $tr=$("<tr><td>"+1+ 26 "</td><td>"+$username+ 27 "</td><td>"+$email+ 28 "</td><td>"+$phone+ 29 "</td><td>"+"<a href=#>删除</a>"+ 30 "</td></tr>"); 31 $tr.appendTo($("table")) 32 */ 33 34 //逐步添加 35 $tr=$("<tr></tr>"); 36 $name_td=$("<td></td>"); 37 $name_td.text(username); 38 $name_td.appendTo($tr); 39 40 41 $email_td=$("<td></td>"); 42 $email_td.text(email); 43 $email_td.appendTo($tr); 44 45 46 $phone_td=$("<td></td>"); 47 $phone_td.text(phone); 48 $phone_td.appendTo($tr); 49 50 $a_td=$("<td></td>"); 51 $myhref=$("<a ></a>"); 52 $myhref.text("删除"); 53 $myhref.attr("href",""); 54 $myhref.appendTo($a_td); 55 $a_td.appendTo($tr); 56 57 58 $myhref.click(function(){ 59 var b=window.confirm("确认删除"+$(this).parent().parent().children().eq(0).text()+"?"); 60 if(b) 61 { 62 $(this).parent().remove(); 63 return true; 64 } 65 else{ 66 return false; 67 } 68 }); 69 70 $tr.appendTo($("table")); 71 72 73 74 75 76 77 }); 78 }); 79 80 </script> 81 </head> 82 <body> 83 用户名<input type="text" name="username" id="username" ></input> 84 邮箱<input type="text" name="email" id="email" ></input> 85 电话<input type="text" name="phone" id="phone" ></input> 86 <input type="button" id="add" value="添加"/> 87 <hr> 88 <table> 89 <tr> 90 91 <td>用户名</td> 92 <td>邮箱</td> 93 <td>电话</td> 94 <td>操作</td> 95 </tr> 96 <tr> 97 <td>wang</td> 98 <td>wang@qq.com</td> 99 <td>12322112212</td> 100 <td><a href=#>delete</a></td> 101 </tr> 102 103 </body> 104 </html>